前端UI组件移动开发小程序【免费下载链接】wot-design-uni一个基于Vue3TS开发的uni-app组件库提供70高质量组件支持暗黑模式、国际化和自定义主题。项目地址https://gitcode.com/gh_mirrors/wo/wot-design-uni点击查看免费下载导读本文是 wot-design-uni 组件库中 Steps 步骤条含 Step 步骤项组件的技术实战指南。Steps 组件用于引导用户按照既定流程完成任务或向用户直观展示多阶段流程的当前进度状态典型场景包括注册引导、订单流转、表单分步填写等。读完本文你将掌握wd-steps/wd-step的全部属性与插槽用法、水平/竖向/点状三种布局形态、状态定制与国际化默认文案机制并通过源码分析理解父子组件通信与进度推导的底层实现。一、组件定位与基本用法Steps 步骤条由容器组件wd-steps和步骤项组件wd-step组合使用。进度由active属性控制它是number 类型表示当前激活步骤的下标从 0 开始默认值为0。wd-steps :activeactive wd-step / wd-step / wd-step / /wd-stepsconst active refnumber(0) function nextStep() { active.value active.value 1 }active会随着业务推进动态变化例如配合按钮事件自增即可实现下一步的进度驱动。组件本身不内置跳转逻辑进度完全由业务侧控制这种设计保证了灵活性与可定制性。该组件同样适用于微信小程序、App、H5 等多端场景因为其实现仅依赖 uni-app 的view/text等基础节点具体可参见 示例页面该页面完整复现了本文介绍的全部用法。二、布局形态水平居中、间距与宽度分配水平居中设置align-center即可让横向步骤条在容器内水平居中该属性只对横向步骤条有效wd-steps :active0 align-center wd-step / wd-step / wd-step / /wd-steps步骤间距 spacespace用于控制步骤条之间的间距类型为string默认不设置时自动计算。从源码wd-step.vue可以看到间距的计算逻辑const rootStyle computed(() { const style: CSSProperties {} if (steps) { const { vertical, space } steps.props if (vertical) { if (isDef(space)) { style[height] space // 竖向space 决定每个步骤的高度 } } else { style[width] space || 100 / steps.children.length % // 横向默认按子项数均分宽度 } } return ${objToStyle(style)}${props.customStyle} })这段实现揭示了两个关键细节横向布局下未设置space时每个步骤项的宽度按100 / 步骤数 %自动均分保证步骤条铺满容器宽度竖向布局下space作为每个步骤的高度传入可用于控制纵向间距。三、设置标题与描述信息通过title和description属性可分别设置步骤的标题与描述wd-steps :activeactive align-center wd-step titleStep 1 descriptionRegister an account / wd-step titleStep 2 descriptionLogin and bind phone number / wd-step titleStep 3 descriptionComplete personal information / /wd-steps wd-button sizesmall clicknextStepNext Step/wd-buttonconst active refnumber(0) function nextStep() { active.value active.value 1 }两点使用细节值得注意不设置标题时使用默认文案。默认文案并非硬编码在组件中而是来自国际化语言包。在 wd-step.vue 中getCurrentTitle通过useTranslate(steps)按当前状态取对应文案例如中文语言包zh-CN.ts定义了wait: 未开始、finished: 已完成、process: 进行中、failed: 失败英文语言包en-US.ts则提供Not Started / Expired / In Progress / Failed等对应文案。这意味着组件默认文案会跟随 Locale 配置自动切换详见仓库中的 locale 配置文档。当只有标题而没有描述时标题字号会缩小 2 号。其样式依据在 index.scss 中标题默认字号较小只有存在描述is-description时才使用完整字号。四、自定义图标icon 属性与插槽通过 icon 属性指定图标传入图标名称即可替换默认的数字图标wd-steps :active1 align-center wd-step iconinvite / wd-step iconlink / wd-step iconclock / /wd-steps图标名称取自 wot-design-uni 内置图标库对应wd-icon组件。在 wd-step.vue 中图标渲染优先级为点状圆点 icon 插槽 icon 属性 默认数字/状态图标。即当未设置任何图标时完成态自动渲染对勾check-bold、错误态渲染叉号close-bold、其余状态渲染步骤序号数字。通过 icon 插槽自定义:::tip 破坏性更新提醒版本 1.2.10 在1.2.10版本中step组件废弃了title-slot、icon-slot、description-slot三个控制插槽使用的布尔字段新增支持直接使用title、icon、description插槽同时废弃了default插槽。 :::因此从1.2.10起使用插槽自定义图标无需再设置icon-slot该字段已从 types.ts 的 props 定义中移除直接书写插槽内容即可wd-steps :active1 align-center wd-step template #icon/template /wd-step wd-step iconlink / wd-step iconclock / /wd-steps源码中通过$slots.icon判断插槽是否被使用见 wd-step.vue实现了有插槽走插槽、无插槽走属性的自动降级逻辑。五、竖向步骤条与点状步骤条竖向步骤条设置vertical属性即可切换为纵向排列wd-steps :active1 vertical wd-step descriptionRegister an account / wd-step descriptionLogin and bind phone number / wd-step descriptionComplete personal information / /wd-steps竖向布局下步骤头部图标与连接线固定在左侧内容区域右移并带有底部留白index.scss 中.is-vertical相关样式连接线由横向的水平线变为纵向的 1px 竖线。点状步骤条在竖向的基础上叠加dot属性可将默认的圆形数字图标切换为小圆点wd-steps :active1 vertical dot wd-step descriptionRegister an account / wd-step descriptionLogin and bind phone number / wd-step descriptionComplete personal information / /wd-steps点状样式在 index.scss 中定义图标尺寸收窄为圆点大小默认7px可经 CSS 变量--wot-steps-dot-size调整并去除边框与背景。进行中的点状步骤还会渲染一圈半透明光晕::after伪元素见is-process状态样式用于强调当前进度位置。六、状态定制finished / process / error通过status属性可手动指定单个步骤的状态支持finished完成、process进行中、error失败三种取值wd-steps :active1 align-center wd-step titleBind Phone statuserror / wd-step titleRebind Phone / wd-step titleStep 3 / /wd-steps状态推导的源码逻辑在 wd-step.vue 中getCurrentStatus遵循显式优先、自动兜底的原则function getCurrentStatus(index: number) { if (props.status) { return props.status // 1. 显式设置的 status 优先级最高 } if (steps) { const { active } steps.props if (Number(active) index) { return finished // 2. 下标小于 active已完成 } else if (Number(active) index) { return process // 3. 下标等于 active进行中 } else { return wait // 4. 下标大于 active等待 } } return wait }也就是说只有未显式设置status的步骤项才会根据active自动推导状态。三种状态分别对应不同的视觉表现index.scssfinished完成态标题与图标边框变为主题色默认图标替换为对勾process进行态图标背景填充主题色并反白显示点状模式附带光晕error错误态标题与图标变为危险色默认图标替换为叉号。此外处于error状态时默认标题文案取语言包中的failed如中文失败见getCurrentTitle的映射逻辑。七、完整 API 参考Steps Attributes步骤条容器参数说明类型可选值默认值最低版本active步骤进度number-0-vertical垂直方向boolean-false-dot点状步骤条boolean-false-space步骤条间距默认为自动计算string---align-center是否水平居中只对横向步骤条有效boolean-false-以上属性定义可在 wd-steps/types.ts 中查到所有属性均继承自baseProps。Step Attributes步骤项参数说明类型可选值默认值最低版本title标题如果没有则为默认文案当只有标题而没有描述时标题字号会小 2 号string---title-slot使用 title 插槽时需要设置该属性已废弃直接使用 title 插槽即可boolean-false-description描述string---description-slot使用 description 插槽时需要设置该属性已废弃直接使用 description 插槽即可boolean-false-icon图标string---icon-slot使用 icon 插槽时需要设置该属性已废弃直接使用 icon 插槽即可boolean-false-status步骤状态stringfinished / process / error--status的类型约束在 wd-step/types.ts 中定义为StepStatus finished | process | error。Step Slot步骤项插槽name说明最低版本icon图标1.2.10title标题1.2.10description描述1.2.10从1.2.10起三个插槽均可直接使用无需配合废弃的*-slot布尔字段同时default插槽已废弃请按具名插槽组织内容。外部样式类组件类名说明最低版本Stepscustom-class根节点样式-Stepcustom-class根节点样式-custom-class与custom-style均来自baseProps定义于 common/props.ts用于覆盖根节点类名与内联样式。在 wd-steps.vue 中容器根节点会将customClass拼入wd-steps类名wd-step同样将customStyle追加到计算后的rootStyle中。八、样式主题定制与暗黑模式步骤条的核心视觉变量定义在 variable.scss全部以 CSS 变量形式暴露可直接覆盖以定制主题SCSS 变量对应 CSS 变量默认值用途$steps-icon-size--wot-steps-icon-size22px图标尺寸$steps-inactive-color--wot-steps-inactive-colorrgba(0,0,0,0.25)等待状态文字颜色$steps-finished-color--wot-steps-finished-color主题色完成文字颜色$steps-error-color--wot-steps-error-color危险色异常颜色$steps-dot-size--wot-steps-dot-size7px点状大小$steps-line-color--wot-steps-line-colorrgba(0,0,0,0.15)连接线颜色例如通过:root { --wot-steps-finished-color: #07c160; }即可将完成态统一改为绿色。在暗黑模式下wd-step/index.scss 通过.wot-theme-dark选择器对图标背景、连接线、圆点、文字颜色等做了专门的暗色适配因此组件开箱即支持仓库的暗黑模式体系。九、源码原理剖析父子组件如何协同工作1. 父子通信provide / inject 注入wd-steps与wd-step是一对典型的容器 子项组件。容器通过 useChildren 在STEPS_KEY定义于 wd-steps/types.ts上注入自己的props与子项注册能力// wd-steps.vue 核心逻辑 const props defineProps(stepsProps) const { linkChildren } useChildren(STEPS_KEY) linkChildren({ props })每个wd-step通过 useParent 注入父级上下文拿到steps.props、steps.children以及自己在兄弟节点中的index并在卸载时自动注销。子项注册后会按虚拟 DOM 顺序排序sortChildren保证index与渲染顺序一致——这正是active下标能正确对应步骤位置的基础。2. 连接线的渲染边界步骤之间的连接线.wd-step__line只在非末尾步骤渲染源码中通过v-ifindex childrenLength - 1控制wd-step.vue因此最后一个步骤项后面不会出现多余的线条。3. 测试覆盖仓库在 wd-steps.test.ts 中对组件行为做了系统验证覆盖了基础渲染根节点含wd-steps类、竖向布局is-vertical类、居中对齐、点状样式、customClass/customStyle透传以及多步骤场景下子项数量、标题与描述的挂载与active属性传递。这些测试可作为理解组件契约与回归保障的参考。十、常见用法总结需求配置方式展示多步骤流程进度wd-steps 多个wd-step用active驱动横向步骤居中展示容器加align-center纵向时间线式展示容器加vertical紧凑点状展示容器加vertical dot给步骤命名与补充说明步骤项titledescription更换步骤图标步骤项icon属性或#icon插槽1.2.10标记某步骤失败步骤项statuserror自定义根节点样式容器/步骤项custom-class、custom-style主题定制覆盖--wot-steps-*CSS 变量至此从属性使用到状态推导、从插槽升级到源码实现Steps 步骤条的完整技术图景已经清晰。更多组合用法可对照 组件示例页 与 中文文档 实践验证。赞分享前端UI组件移动开发小程序【免费下载链接】wot-design-uni一个基于Vue3TS开发的uni-app组件库提供70高质量组件支持暗黑模式、国际化和自定义主题。项目地址https://gitcode.com/gh_mirrors/wo/wot-design-uni点击查看免费下载相关推荐wot-design-uni Switch 开关组件完全指南从基本用法到源码级原理wot design uni Switch 开关组件完全指南从基本用法到源码级原理 wd switch 是 wot design uni 组件库中用于打开或前端UI组件移动开发小程序wot-design-uni 单选框Radio组件完全指南从基本用法到源码级原理wot design uni 单选框Radio组件完全指南从基本用法到源码级原理 单选框Radio用于在一组备选项中进行单选是表单类页面中最基础的表前端UI组件移动开发小程序wot-design-uni Badge 徽标组件完全指南从基本用法到源码级原理剖析wot design uni Badge 徽标组件完全指南从基本用法到源码级原理剖析 Badge徽标是 wot design uni 组件库中用于在按钮、前端UI组件移动开发小程序上一篇AlgoNote 题解精讲LeetCode 0688 骑士在棋盘上的概率 —— 概率动态规划概率 DP实战解析下一篇如何高效使用抖音批量下载工具5步实现自动化收藏管理创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考