牛咔视频平台步骤条组件
设置 active 属性,接受一个 Number,表明步骤的 index,从 0 开始。
active
Number
<template> <div> <niuka-steps :active="active" :steps="steps"></niuka-steps> <el-button @click="nextStep">下一步</el-button> 当前的步骤是:{{ steps[active].title }} </div> </template> <script> export default { data() { return { active: 0, steps: [ { title: '设置基本信息' }, { title: '设置直播功能' }, { title: '设置直播详情' }, ], }; }, methods: { nextStep() { this.active < 2 && this.active++; }, }, }; </script>
可以在 steps 中配置 icon 字段来切换步骤中的图标
steps
icon
每个 step 的间距,不填写默认 152px
step
152px
<template> <div> <niuka-steps :active="active" :steps="steps" :space="100"></niuka-steps> </div> </template> <script> export default { data() { return { active: 0, steps: [ { title: '设置基本信息' }, { title: '设置直播功能' }, { title: '设置直播详情' }, ], }; }, }; </script>
← LoadList 懒加载列表 Anchor 锚点 →