更新记录

1.0.0（2020-09-22） 下载此版本

1.0.0

• 首版发布

平台兼容性

Y-Steps 纵向步骤条

颜色样式若与需求不符，可按自己需求修改 css 中颜色变量

使用方式

在 script 中引用组件

import YSteps from '@/components/Y-Steps.vue'
export default {
    components: { YSteps }
}

在 template 中的使用

<y-steps :stepList="stepList"></y-steps>

// Options 变量，请写在 data 中
stepList: [
    {
        date: '08-28', // 左侧日期 -- 必选
        time: '11:22', // 左侧时间 -- 必选
        info: '开卡', // 右侧内容 -- 可选
        index: '1', // 中间 Index -- 可选
        isFinished: true, // 是否已完成（完成 index 为 √）-- 可选
        isActive: false, // 是否为当前节点 Active（当前节点 即使完成 index 也不会显示 √）-- 可选
        isShowSlot: false // 右侧是否有 Slot（显示在 右侧内容下方）-- 可选
    },
    {
        date: '08-30',
        time: '15:33',
        info: '激活',
        index: '2',
        isFinished: false,
        isActive: true,
        isShowSlot: true
    }
]

数据属性说明