1.0.0 • Published 6 years ago
a-vue-steps v1.0.0
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>
演示图
1.0.0
6 years ago