a-vue-steps

vue-steps

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

使用:

import VueSteps from 'vue-steps'
import '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>
import Steps from './Steps'
export default {
  name: 'App',
  components: {
    Steps
  },
  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>

演示图