wxl279414347 / vue-steps

基于 vue 的步骤条插件

vue-steps

2k大小, 简单轻巧的 Vue 组件, �轻松创建步骤条

在自己项目中使用

下载

npm i a-vue-steps --save

使用:

import VueSteps from 'a-vue-steps'
import 'a-vue-steps/dist/vue-steps.min.css'
Vue.use(VueSteps)

配置项

�属性	类型	�示例	说明
items	Array	[{num: '一',text: '测试阶段1'},...]	num 为步骤数, text 为步骤说明文字
activeIndex	Number	1	�默认为0

示例

<template>
  <VueSteps :items="items" :activeIndex='index'/>
</template>

<script>
export default {
  data () {
    return {
      items: [
        {
          num: '一',
          text: '测试阶段1'
        },
        {
          num: '二',
          text: '测试阶段2'
        },
        {
          num: '三',
          text: '测试阶段3'
        }
      ],
      index: 0
    }
  },
  methods: {
    next () {
      if (this.index < 2) {
        this.index += 1
      } else {
        this.index = 0
      }
    }
  }
}
</script>

��演示图