meixiStepBar

用于业务当中展示步骤进度条。

项目结构

    |-- lib  ---------------------------插件打包后文件夹
    |   |-- demo.html
    |   |-- meixistepbar.common.js
    |   |-- meixistepbar.umd.js
    |   |-- meixistepbar.umd.min.js
    |-- packages ---------------------------插件主要文件夹
    |   |-- index.ts ---------------------------入口文件
    |   |-- component ---------------------------组件文件夹
    |       |-- meixiStepBar.vue ---------------------------主要组件
    |       |-- stepBarItem.vue
    |-- public
    |   |-- favicon.ico
    |   |-- index.html
    |-- src

组件预览

安装依赖

npm install meixiStepBar

项目文件

/// index.ts
// 入口只导出 meixiHandleRecord 组件
export {meixiStepBar}

插件使用

  <meixi-step-bar v-model='activityStep'
                  :error='errorIndex'
                  :error-text='orderInfo.verifyRemark '
                  :step-list='listStep'>
</meixi-step-bar>

meixiStepBar Api

props

| 参数 | 类型 | 默认值 | 可选值 | 描述 | |-----------|---------|-----------|------------|----------------------------------| | v-model | / | / | / | 当前被选中的数组下标 | | size | String | mini | mini | 进度步骤条的大小 | | stepList | Array | / | / | 总共需要渲染的步骤列表，类型为{title:'第一步'} | | space | String | / | / | 单条步骤的宽度 | | event | Boolean | false | true/false | 单条步骤是否开启点击事件,并且修改v-model为点击的数组下标 | | error | Number | 0 | | 如果需要显示某一条步骤是否渲染成错误的样式可以修改成数组下标 | | errorText | String | 这是一段错误的描述 | | 当鼠标hover错误的步骤时，悬浮出来的提示文字 |

emit 事件

暂无

slot 插槽

暂无