PIUI 高质量开源组件库

# Steps 步骤条 v1.2.0

步骤条组件，用于完成一个任务要分几个步骤，标识目前处于第几步的场景。

提示

  1. 组件可通过mode指定步骤类型，可选值为dot、number、icon，可通过组件传入
  2. 也可以通过items每一项中的mode属性进行覆盖，达到混合类型的展示效果

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
√ √ √ √ √ √ √

# 示例

# 基础用法

  1. 通过items参数传入一个数组，标识步骤的总数
  2. 通过v-model/value参数标识目前处于第几步，默认从0开始
<template>
  <view>
    <pi-steps v-model="current" :items="items" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      items: [
        {
          name: '编辑',
          desc: ''
        },
        {
          name: '审核',
          desc: ''
        },
        {
          name: '结果',
          desc: ''
        },
        {
          name: '留言',
          desc: '描述文字'
        }
      ]
    }
  }
}
</script>
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

# 方向

direction可以设置为 row (默认,水平排列)、column 垂直排列

<template>
  <view>
    <pi-steps v-model="current" :items="items" direction="column" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
      items: [
        {
          name: '编辑',
          desc: ''
        },
        {
          name: '审核',
          desc: ''
        },
        {
          name: '结果',
          desc: ''
        },
        {
          name: '留言',
          desc: '描述文字'
        }
      ]
    }
  }
}
</script>
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

# 数字

  1. mode可以设置为 number 数字模式
  2. size 形状尺寸
<template>
  <view>
    <pi-steps v-model="current" :items="items" mode="number" size="24" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
      items: [
        {
          name: '编辑',
          desc: ''
        },
        {
          name: '审核',
          desc: ''
        },
        {
          name: '结果',
          desc: ''
        },
        {
          name: '留言',
          desc: '描述文字'
        }
      ]
    }
  }
}
</script>
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

# 图标

  1. mode可以设置为icon` 图标模式
  2. 在 items 属性中定义icon图标
<template>
  <view>
    <pi-steps v-model="current" :items="items" mode="icon" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
      items: [
        {
          name: '编辑',
          icon: { name: 'bianji1' },
          desc: ''
        },
        {
          name: '审核中',
          icon: { name: 'timefill' },
          desc: ''
        },
        {
          name: '结果',
          icon: { name: 'roundcheckfill' },
          desc: ''
        },
        {
          name: '留言',
          icon: { name: 'liuyanfill' },
          desc: '描述文字'
        }
      ]
    }
  }
}
</script>
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

# 自定义slot

注意

由于微信小程序平台兼容性，已知问题如下：

  1. uniapp工程manifest.json必须在mp-weixin下声明"scopedSlotsCompiler": "legacy"，否则无法使用自定义slot
  2. slot中无法绑定 @tap 事件
  3. slot中只能使用 item index active 等data，无法获取父组件的数据
<template>
  <view>
    <pi-steps
      v-model="current"
      :items="express"
      direction="column"
      color="#999999"
      current-color="#999999"
      mode="dot"
      size="12"
    >
      <template slot="item" slot-scope="{ item }">
        <view class="pi-dashed-bottom-2 pi-pd-20">
          <view>{{ item.name }}</view>
          <view>{{ item.desc }}</view>
        </view>
      </template>
    </pi-steps>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
      items: [
        {
          name: '运输中',
          time: '11-10 09:20',
          icon: { name: 'bianji1' },
          desc: '离开【珠海前山处理中心】，下一站【北京集散中心】'
        },
        {
          name: '已揽件',
          time: '11-10 08:20',
          icon: { name: 'bianji1' },
          desc: '您的包裹已出库'
        },
        {
          name: '已发货',
          time: '11-09 20:20',
          icon: { name: 'bianji1' },
          desc: '等待揽收中'
        },
        {
          name: '已出库',
          time: '11-09 15:20',
          mode: 'icon',
          icon: { name: 'bianji1' },
          desc: '您的订单开始处理'
        },
        {
          name: '已下单',
          time: '11-09 08:20',
          mode: 'icon',
          icon: { name: 'activity-fill' },
          desc: '您的包裹已出库'
        }
      ]
    }
  }
}
</script>
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

# API

# Props

名称 描述 类型 必选 默认值
v-model/value 初始值 Array false []
customStyle 自定义样式 'Object' false {}
customClass 自定义样式类 'String' false ''
mode 步骤条的类型，默认（'dot'） String false 'dot'
items 选项列表 Array true item配置项
itemStyle 自定义样式 'Object' false {}
itemClass 自定义样式类 'String' false ''
direction 排列方向，row-横向，column-纵向 String false 'row'
active-color 激活步骤的颜色 String false ''
color 未激活步骤的颜色 String false '#cccccc'
current-color 当前步骤的颜色 String false '#666666'
size 尺寸 String false '24'
icon 图标配置 Object false icon配置项

# Item Props

名称 描述 类型 必选 默认值
name 步骤名称 String false ''
desc 步骤名称 String false ''
mode item步骤条的类型，默认（'dot'） String false 'dot'
icon item图标配置 Object false icon配置项

# Icon Props

提示

以下属性覆盖pi-icon配置，其余属性参考icon配置项

名称 描述 类型 必选 默认值
size 图标字体大小，单位rpx String | Number false 40
Last updated: 2021/11/23 上午9:50:04

← Notify 消息通知 →

10:44