Meri Plus步骤条 Steps
常用的操作按钮 根据右侧下拉触发配置相应的属性
不带序号-无交互
带序号-可带交互也可不带
带 icon 图标-可带交互也可不带
带状态的
带插槽的
自定义图片
API
Attributes
| 名称 | 类型 | 可选值 | 默认值 | 说明 | 必须 |
|---|---|---|---|---|---|
| v-model | String | null | null | 带交互时当前交互节点 | No |
| size | String | medium | small | medium | 每个 step 的间距，不填写将默认 20。 | No |
| space | Number | string | - | 20 | 当前步骤条标题文字大小 | No |
| layout | String | vertical | horizontal | vertical | 当前步骤条显示方向 | No |
| lineType | String | solid | dashed | solid | 当前步骤条线条类型 | No |
| category | String | default | number | icon | default | 是否带序号，默认不带序号无交互 | No |
| defaultColor | Boolean | String | true | false | true | 当前节点默认颜色（未单独展示，可参考类别） | No |
| readonly | Boolean | String | false | true | false | 当前步骤条状态是否可编辑 | No |
| defaultSet | Boolean | String | false | true | true | 当前步骤条状态是否默认设置 | No |
Node Attributes （单个对象中的属性）
| 参数 | 类型 | 说明 |
|---|---|---|
| index | Number | string | 索引 (必须) |
| title | String | 标题文字(必须) |
| description | String | 辅助文字(必须) |
| icon | String | 当前 icon 名称，category 为 icon 时为必填项 |
| status | String | 当前节点状态 (可配置项 finish/error/success,优先级高于 color, 需要配置其他颜色使用 color 字段定义) |
| color | String | 定义当前节点背景色，defaultColor 为 false 时为必填项 |
Events
| 类型 | 参数 | 说明 |
|---|---|---|
| change | (current: any, context?: { e?: MouseEvent }) | 当前事件发生变化时触发 返回当前对象 |
Slot
| 名称 | 说明 |
|---|---|
| title | 标题文字填充的内容 |
| description | 辅助文字填充的内容 |
| defaultImg | 自定义图片默认（category为icon生效） |
| activeImg | 自定义图片激活（category为icon生效） |