sard-uniapp

--- nav: 组件 title: Steps subtitle: 步骤条 group: 导航组件 --- ## 介绍引导用户按照流程完成任务的分步导航条。 ## 引入 ```ts import Steps from 'sard-uniapp/components/steps/steps.vue' ``` ## 代码演示 ### 基础使用使用 `current` 属性指定步骤的下标，小于这个下标的步骤状态为 `finish`，等于这个下标的步骤状态为 `process`，大于这个下标的步骤状态为 `wait`。 @code('${DEMO_PATH}/steps/demo/Basic.vue') ### 居中居中每个步骤的图标和文案。 @code('${DEMO_PATH}/steps/demo/Center.vue') ### 文字在上 <sup>1.23.4+</sup> 可以使用 `reverse` 属性将水平排列时的文字和图标位置调换。 @code('${DEMO_PATH}/steps/demo/Reverse.vue') ### 垂直步骤条设置 `direction="vertical"` 可以垂直排列。 @code('${DEMO_PATH}/steps/demo/Vertical.vue') ### 垂直居中将图标和文案垂直居中。 @code('${DEMO_PATH}/steps/demo/VerticalCenter.vue') ### 自定义图标使用 `finishIcon, processIcon, waitIcon, errorIcon` 属性设置不通状态下的图标。 @code('${DEMO_PATH}/steps/demo/Icon.vue') ### 自定义颜色使用 `css` 变量设置元素样式。 @code('${DEMO_PATH}/steps/demo/Color.vue') ### 当前步骤状态可以设置当前处理中的步骤的状态为 `finish` 来模拟只有“未处理”和“已处理”两个状态的步骤条。 @code('${DEMO_PATH}/steps/demo/Status.vue') ### 错误步骤可以设置当前处理中的步骤的状态为 `error` 表示步骤运行错误。 @code('${DEMO_PATH}/steps/demo/ErrorStatus.vue') ### 自定义各步骤状态每个步骤都可以使用 `status` 属性设置其状态。 @code('${DEMO_PATH}/steps/demo/StepStatus.vue') ### 默认插槽版本 `1.17.1+` 可使用 `Step` 组件实现自定义内容，必须传递 `index` 属性。 @code('${DEMO_PATH}/steps/demo/Slot.vue') ## API ### StepsProps | 属性 | 描述 | 类型 | 默认值 | | ------------ | ---------------------------------- | -------------------------- | ------------ | | root-class | 组件根元素类名 | string | - | | root-style | 组件根元素样式 | StyleValue | - | | current | 当前步骤对应的索引值 | number | 0 | | item-list | 所有步骤的数据 | StepsItem[] | [] | | center | 是否居中 | boolean | false | | direction | 排列方向 | 'vertical' \| 'horizontal' | 'horizontal' | | reverse | 水平排列时，文字和图标是否调换位置 | boolean | false | | status | 指定当前步骤的状态 | StepsStatus | - | | icon-family | 图标字体 | string | - | | icon-size | 图标字号 | string | - | | finish-icon | 已完成状态的图标名称 | string | - | | process-icon | 处理中状态的图标名称 | string | - | | wait-icon | 等待中状态的图标名称 | string | - | | error-icon | 错误状态的图标名称 | string | - | ### StepsSlots | 插槽 | 描述 | 属性 | | ------- | -------------- | ---- | | default | 自定义默认内容 | - | ### StepProps | 属性 | 描述 | 类型 | 默认值 | | ----------- | ---------------- | ----------- | ------ | | root-class | 组件根元素类名 | string | - | | root-style | 组件根元素样式 | StyleValue | - | | status | 自定义状态 | StepsStatus | - | | name | 步骤名称 | string | - | | description | 步骤描述 | string | - | | index | 步骤下标（必填） | number | - | ### StepSlots | 插槽 | 描述 | 属性 | | ------- | -------------- | ----------------------- | | default | 自定义默认内容 | { status: StepsStatus } | | icon | 自定义图标内容 | { status: StepsStatus } | ### StepsItem | 属性 | 描述 | 类型 | 默认值 | | ----------- | ---------- | ----------- | ------ | | status | 自定义状态 | StepsStatus | - | | name | 步骤名称 | string | - | | description | 步骤描述 | string | - | ### StepsStatus ```ts type StepsStatus = 'wait' | 'process' | 'error' | 'finish' ``` ## 主题定制 ### CSS 变量 @code('./variables.scss#variables')