TuniaoUI

# Steps 步骤条

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

# 平台差异说明

App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序
√ √ √ 兼容中 兼容中 兼容中 兼容中

# 基本使用

  • 通过list参数传入一个数组，标识步骤的总数。
  • 在list数组中name属性设置步骤条对应步骤的名称，icon属性设置步骤条对应步骤的图标，selectIcon设置步骤条对应步骤显示的图标(在mode为icon和dotIcon模式下生效)。
  • 通过current参数标识目前处于第几步，从0开始，传入1为第一步。
<template>
  <tn-steps :list="list"></tn-steps>
</template>

<script>
  export default {
    data() {
      return {
        list: [{
            name: '第一步'
          },
          {
            name: '第二步',
            icon: 'trusty',
            selectIcon: 'trusty-fill'
          },
          {
            name: '第三步',
            icon: 'safe',
            selectIcon: 'safe-fill'
          },
          {
            name: '第四步',
            icon: 'vip',
            selectIcon: 'vip-fill'
          }
        ]
      }
    }

  }
</script>

# 设置步骤条模式

该组件一共提供了4中步骤条模式，通过mode属性修改步骤条的模式：

  • dot：点模式，在该模式下步骤条显示为一个点。
  • number：数值模式，在该模式下步骤条会显示当前步骤的数字并在已完成的步骤显示自定义的图标。
  • icon：图标模式，在该模式下步骤条会显示配置的图标。
  • dotIcon：点图标模式，在该模式下步骤条在未完成的步骤显示为一个点，已完成的步骤显示为设置好的图标。
<tn-steps mode="number"></tn-steps>

# 设置自定义图标

该组件提供了两种方式供用户设置步骤条上的图标：

  • 设置icon参数。
  • 设置list数组中的icon和selectIcon(mode为icon和dotIcon下生效)属性，这中方式设置的图标优先级比设置icon参数高。
<template>
  <tn-steps :list="list" icon="error"></tn-steps>
</template>

<script>
  export default {
    data() {
      return {
        list: [{
            name: '第一步'
          },
          {
            name: '第二步',
            icon: 'trusty',
            selectIcon: 'trusty-fill'
          },
          {
            name: '第三步',
            icon: 'safe',
            selectIcon: 'safe-fill'
          },
          {
            name: '第四步',
            icon: 'vip',
            selectIcon: 'vip-fill'
          }
        ]
      }
    }

  }
</script>

# 自定义颜色

通过设置activeColor和inActiveColor属性设置已完成步骤的颜色和未完成步骤的颜色。

<tn-steps mode="number" activeColor="#01BEFF" inactiveColor="#E6E6E6"></tn-steps>

# API

# Props

属性名 说明 类型 默认值 可选值
mode 模式，说明请参考上面示例 String dot number/icon/dotIcon
list 步骤条的数据，数据对象的属性说明请参考上面示例 Array - -
direction 步骤条的方向 String row column
current 当前激活的步骤 Number 0 -
activeColor 已完成步骤的颜色 String #01BEFF -
inActiveColor 未完成步骤的颜色 String #AAAAAA -
icon 自定义图标，在mode为number、icon、dotIcon模式下有效 String success -
showTitle 是否显示底部标题 Boolean true false

# Slots

none

# Event

事件名称 说明 回调参数
click 点击步骤条触发（返回当前激活的index） index: 点击第几个，1代表点击了第1个

← SwipeAction 滑动单元格 →