# Steps 步骤条

请扫码查看示例

# 介绍

用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置。

# 引入

通过以下方式来引入组件

使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
在要使用该组件的页面中使用element标签引入该组件。

# 代码演示

# 基本用法

<element name="m-steps" src="@/node_modules/mui-minix/src/steps/index"></element>
<m-steps steps="{{steps}}" step="{{step}}"></m-steps>

1
2

export default {
  data(){
    return {
      step: 1,
      steps:[
        {
          title:'方案已确认'
        },
        {
          title:'方案已更新'
        },
        {
          title:'方案已上传'
        },
        {
          title:'洗涤完毕'
        }
      ]
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 描述与时间戳

通过设置 desc 属性, 控制描述内容。通过设置 stamp 属性, 控制戳记内容。

<element name="m-steps" src="@/node_modules/mui-minix/src/steps/index"></element>
<m-steps steps="{{steps}}" step="{{step}}"></m-steps>

1
2

export default {
  data(){
    return {
      step: 2,
      steps1:[
        {
          title:'洗涤方式已确认',
          stamp:'2021-050-18  21:10:29'
        },
        {
          title:'洗涤方式已更新',
          stamp:'2021-050-18  21:10:29'
        },
        {
          title:'洗涤方案已上传',
          stamp:'2021-050-18  21:10:29',
          desc:'您已经确定了具体洗涤方式'
        },
        {
          title:'洗涤完毕',
          stamp:'2021-050-18  21:10:29',
          desc:'建议最后开启消毒模式两小时后使用更佳'
        }
      ]
    }
  },
  onInit(){
    setInterval(()=>this.step = Math.round(Math.random()*3), 1000)
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# Api

# Prop

字段	说明	类型	默认值	是否必须
`step`	当前步骤	`number`	`0`	`是`
`steps`	步骤序列	`Step[]`	`[]`	`是`
`theme`	主题	`string`	`brand`	`否`
`active-color`	步骤激活时颜色	`string`	`-`	`否`
`title-text-size`	标题文本字体大小	`number`	`14`	`否`

# Step

名称	类型	说明
`title`	`string`	标题
`desc`	`string`	描述。位于标题下方
`stamp`	`string`	时间戳。位于描述下方

# Events

名称	说明	回调参数
`m-click-step`	点击步骤时触发	`index: number` 步骤索引