• Steps 步骤条

    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

    • 组件实际运行效果参考:https://github.com/dcloudio/uni-ui
    • npm 使用方式参考:https://ext.dcloud.net.cn/plugin?id=55