DolphinHybrid
点我扫二维码，查看demo

# Steps 步骤条

# 介绍

展示流程中的所有操作环节，让用户了解当前流程所处环节。

# 引入

通过以下方式来按需注册组件。

import Vue from 'vue';
import { Steps, Step } from '@dolphin-iot/ui'

Vue.use(Steps);
Vue.use(Step);
1
2
3
4
5

# 代码演示

# 基础用法

active 表示当前步骤的索引值，默认从0开始。

<template>
  <div class="demo-list">
    <div class="panel">
      <div class="demo-panel">
        <mx-steps :active="title1" >
            <mx-step>方案已确认</mx-step>
            <mx-step>方案已更新</mx-step>
            <mx-step>方案已上传</mx-step>
            <mx-step>洗涤完毕</mx-step>
        </mx-steps>
      </div>
      <mx-button @click="nextStep">下一步</mx-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title1: 1,
    };
  },
  methods: {
    nextStep() {
      if (this.title1 < 4) {
        this.title1 ++;
      } else {
        this.title1 = 0;
      }
    }
  },
};
</script>
<style lang="scss">
.demo-list{
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  font-size: 12px;
  overflow-y: auto;

  .panel{
    padding-left: 10px;
    padding-right:10px;
    margin-bottom: 20px;
  }
}

</style>
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

# 主题颜色

通过steps组件中的theme属性，修改进度条的主题颜色。

<template>
  <div class="demo-list">
    <div class="panel">
      <div class="demo-panel">
        <mx-steps :active="title" theme="cyan">
            <mx-step>方案已确认</mx-step>
            <mx-step>方案已更新</mx-step>
            <mx-step>方案已上传</mx-step>
            <mx-step>洗涤完毕</mx-step>
        </mx-steps>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: 1,
    };
  },
};
</script>
<style lang="scss">
.demo-list{
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  font-size: 12px;
  overflow-y: auto;
  .panel{
    padding-left: 10px;
    padding-right:10px;
    margin-bottom: 20px;
  }
}

</style>
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
31
32
33
34
35
36
37
38
39

# 自定义图标

通过组件steps中的active-icon属性自定义图标

<template>
  <div class="demo-list">
    <div class="panel">
      <div class="demo-panel">
        <mx-steps :active="title" theme="cyan" active-icon="star">
            <mx-step>方案已确认</mx-step>
            <mx-step>方案已更新</mx-step>
            <mx-step>方案已上传</mx-step>
            <mx-step>洗涤完毕</mx-step>
        </mx-steps>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: 1,
    };
  },
};
</script>
<style lang="scss">
.demo-list{
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  font-size: 12px;
  overflow-y: auto;
  .panel{
    padding-left: 10px;
    padding-right:10px;
    margin-bottom: 20px;
  }
}
</style>
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
31
32
33
34
35
36
37
38

# 点击事件

当点击step组件时触发，返回当前step的索引值。


<template>
  <div class="demo-list">
    <div class="panel">
      <div class="demo-panel">
        <mx-steps :active="title" theme="cyan" active-icon="star" @click-step="clickStep">
            <mx-step>方案已确认</mx-step>
            <mx-step>方案已更新</mx-step>
            <mx-step>方案已上传</mx-step>
            <mx-step>洗涤完毕</mx-step>
        </mx-steps>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 1,
    };
  },
  methods: {
    
    clickStep(val) {
      alert(val)
    }
  },
};
</script>
<style lang="scss">
.demo-list{
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  font-size: 12px;
  overflow-y: auto;

  .panel{
    padding-left: 10px;
    padding-right:10px;
    margin-bottom: 20px;
  }
}
</style>
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

# 标题,时间

通过step组件中的timestamp、desc属性，传递时间、描述参数；通过默认插槽传递title（标题的参数）；通过这种方式，默认使用系统定义排列方式。

<template>
  <div class="demo-list">
    <div class="panel">
      <div class="demo-panel">
        <mx-steps :active="basic">
            <mx-step timestamp="2021-050-18  21:10:29">洗涤方式已确认</mx-step>
            <mx-step timestamp="2021-050-18  21:10:29">洗涤方式已更新</mx-step>
            <mx-step desc="您已经确定了具体洗涤方式" timestamp="2021-050-18  21:10:29">洗涤方案已上传</mx-step>
            <mx-step desc="建议最后开启消毒模式两小时后使用更佳" timestap="2021-050-18  21:10:29">洗涤完毕</mx-step>
        </mx-steps>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      basic:0,
    };
  },
  mounted(){
      setInterval(()=>this.basic = Math.round(Math.random()*3),1000);
      
  }
};
</script>
<style lang="scss">
.demo-list{
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  font-size: 12px;
  overflow-y: auto;
  .panel{
    padding-left: 10px;
    padding-right:10px;
    margin-bottom: 20px;
  }
}
</style>
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
31
32
33
34
35
36
37
38
39
40
41
42

# 字体大小,背景色

通过title-font-size修改step组件中的title以及title左边的图标的top值进行修改。

<template>
<div class="demo-list">
  <div class="panel">
    <div class="demo-panel">
      <mx-steps :active="cus" title-font-size="12">
        <mx-step>
          <span>22:31:06</span>
          <span>生产净水 1 升</span>
        </mx-step>
        <mx-step>
          <span>21:31:06</span>
          <span>生产净水 1 升</span>
        </mx-step>
        <mx-step>
          <span>17:37:40</span>
          <span>生产净水 2.7 升</span>
        </mx-step>
        <mx-step>
          <span>13:31:06</span>
          <span>生产净水 0.3 升</span>
        </mx-step>
        <mx-step>
          <span>17:37:40</span>
          <span>生产净水 1 升</span>
        </mx-step>
        <mx-step>
          <span>13:31:06</span>
          <span>生产净水 2.7 升</span>
        </mx-step>
        <mx-step>
          <span>22:31:06</span>
          <span>生产净水 0.3 升</span>
        </mx-step>
      </mx-steps>
    </div>
  </div>
</div>
</template>
<script>
export default {
  data() {
    return {
      cus:-1
    };
  },
};
</script>
<style lang="scss">
.demo-list{
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  font-size: 12px;
  overflow-y: auto;

  .panel{
    padding-left: 10px;
    padding-right:10px;
    margin-bottom: 20px;
  }
}
.cus{
    font-size: 12px;

    span:first-child{
        margin-right: 20px;
    }
}
</style>
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

# Api

# Steps Props

字段 说明 类型 默认值
theme 主题颜色，可选值为： purple blue-purpleblue cyan yellow orange orange-red gray-offline string brand
active 当前的步骤 string number 0
active-color 激活状态颜色 string -
inactive-color 未激活状态颜色 string -
active-icon 激活状态底部图标 string -
inactive-icon 未激活状态底部图标 string -
finished-icon 已完成步骤底部图标 string -
icon-prefix 图标类名前缀 string mx-icon
title-font-size 自定义标题文字大小 string number -

# Steps Events

事件名 说明 回调函数
click-step 点击进度条节点时触发 index

# Steps Slots

名称 说明
default 默认自定义内容

# Step Props

字段 说明 类型 默认值
title 标题 string -
desc 描述 string -
timestamp 时间 string -

# Step Events

事件名 说明 回调函数
click-step 点击进度条节点时触发 index

# Step Slots

名称 说明
default 默认自定义内容
content 自定义当前步骤内容
desc 自定义当前描述内容
timestamp 自定义当前时间内容
更新时间: 12/3/2021, 1:36:49 PM

← Toast 轻提示 →