基于 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>
��演示图
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。