前言:
这里对antd的步骤条进行二次封装
实现效果:
实现步骤:
第一:antd_steps.vue
<template>
<a-steps progressDot :current="current">
<a-step v-for="item in steps" :key="item.title" :title="item.title"/>
</a-steps>
</template>
<script>
export default {
props: {
},
data () {
return {
name:'步骤条',
current: 0,
steps: [
{
title: '第一步',
},
{
title: '第二步',
},
{
title: '第三步',
}
],
};
},
components: {},
computed: {},
created() {},
mounted() {},
methods: {
/**
* 点击下一步
*/
next() {
if(this.current<this.steps.length-1){
this.current++;
return this.current;
}else{
return this.steps.length;
}
},
/**
* 点击上一步
*/
prev() {
this.current--;
},
},
watch: {}
}
</script>
<style lang='less' scoped>
</style>
第二:js引入:
import aSteps from '@/components/comantd/antd_steps'
components: {
aSteps,
},
第三:template调用:
<aSteps ref="add_steps"></aSteps>