Steps 步骤条

牛咔视频平台步骤条组件

特性

1. 使用 active 绑定当前步骤
2. 传入 steps 即可渲染组件
3. 支持配置 icon 图标
4. 基于 vue2 版本封装

基础用法

设置 active 属性，接受一个 Number，表明步骤的 index，从 0 开始。

当前的步骤是：设置基本信息

<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>

隐藏源代码

配置 icon

可以在 steps 中配置 icon 字段来切换步骤中的图标

<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>

隐藏源代码

步骤间距

每个 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>

隐藏源代码

NiukaSteps Attributes

Steps Attributes