VUE中自定义步骤条

下列自定义步骤条是根据elementUI中的el-step的样式改编而得。记录下自己改编过程！！！

<template><div class='steps el-steps el-steps--horizontal'><div class='el-step is-horizontal':class='{isFlex:item.index == stepList.length}'style='flex-basis:50%;margin-right:0':style="{'flexBasis':(item.index==stepList.length?0:50)+'%','maxWidth':(item.index==stepList.length?(1/stepList.length)*100:100)+'%'}"v-for="(item,index) in stepList":key='index'><div class='el-step__head is-process'><div class='el-step__line'><i class='el-step__line-inner' style='transition-delay:0ms;border-width:0;width:0%'></i></div></div><div class='textCla'><div  class='el-step__icon is-text' :class="{success:index<active,before:index>active, active:index==active}" @click="clickStep(index,stepFunction)"><div class='el-step__icon-inner'><span v-if='index>=active'>{{item.index}}</span><i v-if='index<active' class='el-icon-check'> </i></div></div><div style='background:#fff;z-index:1;line-height:36px;padding:0 5px' :class="{successText:index<active}">{{item.name}}</div></div><p class='pTitle'>{{item.title}}</p></div></div>
</template>
<script>export default{methods:{//点击步骤条后回调clickStep(index,callback){if(callback) callback(index)}},props:{active:{ type : Number,default:1},stepFunction:{type:Function,default:()=>{}},stepList:{type:Array, default:()=>[] }}}
</script>
<style lang='less' scoped>
.textCla{display:flex;align-items: center;
}
.steps{[class^=el-icon-]{margin-left:0;font-weight:700;color:#4361ec;}
}
.el-step__icon.is-text{height:36px;width:36px;
}
.el-step:last-of-type.isFlex{flex-basis:auto !important;flex-shrink:0;flex-grow:0;
}
.el-step.is-horizontal .el-step__line{top:18px;
}
.success{background-color:#dae0fb !important;color:#fff;
}
.successText{color:#000;
}
.active{background-color:#4361ec !important;color:#fff;
}
.before{background-color:#f3f3f5;border-color:#f3f3f5 !important;span{color:#9b9b9b;}
}
.pTitle{z-index:1;width:84px;margin-left:36px;margin-top:0;white-space:pre-wrap;color:#9b9b9b;font-size:12px;
}
</style>

上诉自定义模板的样式根据自己的需求修改，然后在页面中使用该模板就可以了
下面直接在APP.vue中调用模板

<template><div id="app"><div ><Echartsword ></Echartsword></div><ElStep :stepFunction="stepFunction" :active="active" :stepList="stepList"></ElStep><el-button @click="submit">提交</el-button></div>
</template>
<script>
import ElStep from './components/elStep.vue'
export default {name: 'App',data(){return {val:'',active:0,stepList:[{name:'aaa',index:1,title:'aaa的title信息'},{name:'bbb',index:2,title:'bbb的title信息'},{name:'ccc',index:3,title:'ccc的title信息'},]}},components: {HelloWorld,Hello,Echartsword,ElStep},methods:{inputVal(val){this.val = val},submit(){console.log(this.val)},stepFunction(index){this.active = indexthis.goStep(this.active)},goStep(){}}
}
</script>

效果如下图：

VUE中自定义步骤条相关推荐

vue实现自定义步骤条
首先看一下实现的效果: 来看看实现过程: 公共插件  <template><div class="stepOut"& ...
Vue学习笔记：Vue中封装自定义步骤条实现上下一步
Vue中封装自定义步骤条实现上下一步效果图: 如上图:在VUE中实现效果,VUE+Element,ant都有封装好的UI,直接引用就好了: 这里,觉得样式不符合UI设计,所以自定义封装了一个步骤条 ...
vue、Steps 步骤条、Steps 属性、vue Steps 所有步骤条样式、vue Steps 步骤条全部属性
vue.Steps 步骤条.Steps 属性.vue Steps 所有步骤条样式.vue Steps 步骤条全部属性设计规则何时使用代码演示 1.基本用法 2.迷你版 3.带图标的步骤条 4.步 ...
uniapp自定义步骤条
由于这次使用的uview的ui库中的步骤条不能自定义图标,所以自己用盒子写了一个,先看一下效果直接上代码: <view class="steps"><view ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
vue中自定义组件的命名规则
问题 vue中自定义的组件名在html中字母大写会报错 html: js: 自定义的组件中字母可以大写,但是在html标签中,字母有大写的就会报错原因这是因为html中不区分大小写,所以在html ...
Vue中自定义标签及其使用
Vue中自定义标签及其使用问题需求自定义创建组件的vue文件编辑组件使用导入申明使用使用整个代码效果问题我们在使用Vue开发移动端应用程序时,常常使用Vant Weapp中的 ...
vue中自定义指令、组件化、生命周期、节流和防抖、获取DOM、mint-ui简介、过渡和动画
自定义指令: vue中通过directive方法自定义指令,如:自定义一个v-focus指令: <script>Vue.directive('focus', {//通过directive( ...
vue中富文本编辑器vue-quill-editor在vue中自定义选择视频插入编辑文章中
题记: ----- 互联网不该只是技术的,不能简化成内容和工具,它应该属于生活本身 vue-quill-editor 是 Vue 项目中使用的富文本编辑器 1 引言在实际应用开发中,在常见的管理后 ...

VUE中自定义步骤条

VUE中自定义步骤条

VUE中自定义步骤条相关推荐

最新文章

热门文章