当前位置:项目开发->项目经验 ->vuejs下正确打开steps控件实现步骤条的方法

原创版权标志vuejs下正确打开steps控件实现步骤条的方法

作者:阿郎  发表时间:2018/9/20 18:48:02  阅读:
[摘要] 如何基于element框架的steps插件实现需求
使用支付宝扫码领红包,余额宝付款才可以使用红包哦!不要忘记哈。每天扫一次,天天赚红包!!可以将二维码保存到手机,每天直接扫码领红包啦!!

    本文起源是一个项目需求,由于刚刚接触vue,对vue的许多特性都是不熟悉的,边学边开发吧。但是本文涉及的这个进度条需求,网上根本没有资料深入实现,因此我提取了一些代码来做个示例。转载请注明出处: http://www.cjjjs.com

    代码:

    

父组件:
<template>
 <div id="steps">
 <!-- <my-steps></my-steps> -->
 <mysteps :config="stepConfig"></mysteps>
 </div>
</template>

<script>
import mysteps from '@/components/modules/modals/steps-modal.vue'

export default {
 data(){
 return{
 multiCheck:false
 }
 },
 computed:{
 stepConfig(){
 let step = 2
 let status = "reject"
 let title = 'slot插槽填充 title'
 let description = 'slot插槽填充 description'

 return {
 step,
 status,
 title,
 description
 }
 }
 },
 components:{
 mysteps
 }
}
</script>
子组件:
<template>
 <div class="multi-steps">
 <el-steps align-center :active="config.step">
 <el-step>
 <i slot="icon" class="el-icon-success"></i>
 <span slot="title">
 标题1
 </span>
 <span slot="description">
 <span>描述1</span>
 </span>
 </el-step>
 <el-step>
 <i v-if="config.status === 'reject'" slot="icon" class="el-icon-error step-icon" style="color: red; border:0px"></i>
 <i v-else class="el-icon-success" slot="icon"></i>
 <span slot="title">
 <span style="color:red">{{config.title}}</span>
 </span>
 <span slot="description">
 <span style="color:red">{{config.description}}</span>
 </span>
 </el-step>
 <el-step>
 <i slot="icon" class="el-icon-success"></i>
 <span slot="title">
 标题3
 </span>
 <span slot="description">
 <span>描述3</span>
 </span>
 </el-step>
 </el-steps>
 </div>
</template>

<script>
import ElementUI from 'element-ui'
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
export default {
 data(){
 return{
 
 }
 },
 props: {
 config:{
 type: Object,
 default: {
 step: 0,
 status: 'finish',
 title:',
 description:'
 }
 }
 }
}
</script>

    

    主要就是steps控件提供的slot特性的使用。

微信扫码关注公众号CPP技术网,微信号cpp_coder,关注我们的公众号,阅读更多精彩内容!每天还可以领取大红包哦!!!每天还可以领取大红包哦!!!每天还可以领取大红包哦!!!
文章来源:C++技术网原创文章版权为网站和作者共同所有,会员文章禁止转载。非会员文章转载做好本文超链接即表示授权转载。通过文章下面的分享按钮可以自由分享所有文章。

返回顶部

在线提问
问题标题:
问题描述:(简陋的描述会导致问题被最后回答、没有针对性回答甚至无法解答。请确保问题描述的足够清楚。)