Steps 步骤条

评分组件,组件名:uni-steps,代码块: uSteps。

使用方式:

script 中引用组件

  1. import uniSteps from "@/components/uni-steps/uni-steps.vue"
  2. export default {
  3. components: {uniSteps}
  4. }

基本用法

  1. <uni-steps :data="[
  2. {title: '事件一'},
  3. {title: '事件二'},
  4. {title: '事件三'},
  5. {title: '事件四'}]"
  6. :active="1">
  7. </uni-steps>

纵向排列

  1. <uni-steps :data="[
  2. {title:'买家下单',desc:'2018-11-11'},
  3. {title:'卖家发货',desc:'2018-11-12'},
  4. {title:'买家签收',desc:'2018-11-13'},
  5. {title:'交易完成',desc:'2018-11-14'}]"
  6. direction="column"
  7. :active="2">
  8. </uni-steps>

属性说明:

属性名类型默认值说明
dataArray<Object>-数据源,格式为:[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
activeNumber0当前步骤
directionStringrow排列方向,可取值:row(横向)、column(纵向)
active-colorString#1aad19选中状态的颜色

Tips