vant-weapp/packages/steps

Steps 步骤条

使用指南

在 app.wxss 中引入组件库所有样式

@import "path/to/vant-weapp/dist/index.wxss";

在 index.json 中引入组件

{
  "usingComponents": {
    "van-steps": "path/to/vant-weapp/dist/steps/index"
  }
}

代码演示

基础用法

<van-steps type="horizon" steps="{{steps}}"></van-steps>

2步完成

<van-steps type="horizon" steps="{{steps}}"></van-steps>

steps: [
  {
      done: true,
      current: false,
      text: '步骤一',
      desc: '10.01'
    },
    {
      done: false,
      current: true,
      text: '步骤二',
      desc: '10.02'
    }
]

有描述的steps

<van-steps type="horizon" hasDesc steps="{{steps}}"></van-steps>

垂直方向的steps

<van-steps type="vertical" steps="{{steps}}"></van-steps>

自定义 class

<van-steps
  steps-class="my-class"
  icon-class="gray"
  title-class="white"
  type="horizon"
  steps="{{steps}}"
></van-steps>

参数	说明	类型	默认值	必须
type	steps 的展示状态，可选值为 'horizon', 'vertical'	String	horizon
hasDesc	是否展示描述	Boolean	false
steps	步骤条展示数据	Array		必须
steps-class	自定义类，可改变steps外层样式	String
icon-class	自定义类，可改变icon样式	String
title-class	自定义类，可改变标题样式	String
desc-class	自定义类，可改变描述样式	String

steps 数据格式如下：

[
  {
    // 此步骤是否当前完成状态
    current: false,
    // 此步骤是否已经完成
    done: true,
    // 此步骤显示文案
    text: '步骤一',
    // 此步骤描述语
    desc: '10.01'
  },
  {
    done: true,
    current: false,
    text: '步骤二',
    desc: '10.02'
  },
  {
    done: true,
    current: true,
    text: '步骤三',
    desc: '10.03'
  }
]