Vue实现步骤条效果

本文实例为大家分享了Vue实现步骤条效果的具体代码，供大家参考，具体内容如下

步骤总数和初始选择步骤 均可自定义设置，每个步骤title和description也均可自定义设置传入

效果图如下：

①创建步骤条组件Steps.vue：

②在要使用的页面引入Steps组件，并传入相关初始数据：

 
import Steps from '@/components/Steps'
components: {
    Steps
},
data () {
    return {
      stepsLabel: ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5'],
      stepsDesc: ['description 1', 'description 2', 'description 3', 'description 4', 'description 5']
    }
}
methods: {
    onChange (index) { // 父组件获取切换后的选中步骤
      console.log('parentIndex:', index)
    }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。