Steps 步骤条

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

平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

基本使用

  • 通过list参数传入一个数组,标识步骤的总数
  • 通过current参数标识目前处于第几步,从0开始
  1. <template>
  2. <view>
  3. <u-steps :list="numList" :current="1"></u-steps>
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. data() {
  9. return {
  10. numList: [{
  11. name: '下单'
  12. }, {
  13. name: '出库'
  14. }, {
  15. name: '运输'
  16. }, {
  17. name: '签收'
  18. }, ],
  19. }
  20. }
  21. }
  22. </script>

设置步骤条的主题

  • type值可选的有primary(默认)、successinfowarningerror
  • type值和active-color(默认为空)为互斥关系,如果设置了active-color,会优先起作用
  1. <u-steps :list="numList" active-color="#fa3534"></u-steps>

设置步骤条的模式

mode可以设置为dot(圆点,默认值)或者number(数字),二者有不同形式,见示例

  1. <u-steps :list="numList" mode="number"></u-steps>

API

Props

参数说明类型默认值可选值
mode设置模式Stringdotnumber
list数轴条数据,数组。具体见上方示例Array[ ]-
typetype主题Stringprimaryinfo / success / error / warning
current设置当前处于第几步Number | String0-
active-color已完成步骤的激活颜色,如设置,type值会失效String--
un-active-color未激活的颜色,用于表示未完成步骤的颜色String#606266-