uni-app的uni-steps自定义样式

### 如何对uni-app中的uni-steps组件进行自定义样式 在uni-app开发环境中，`uni-steps` 是一个用于展示流程进度的组件。为了实现对该组件样式的个性化定制，可以通过覆盖默认CSS类的方式来进行调整。 #### 使用全局样式修改 如果希望在整个应用范围内改变 `uni-steps` 的外观，则可以在项目的根目录下的 `App.vue` 或者公共样式文件中添加如下代码： ```css /* 修改步骤条的颜色 */ .uni-steps__item-title { color: red !important; } /* 调整已完成状态的小圆圈颜色 */ .uni-steps--horizontal .uni-steps__finish-line, .uni-steps--vertical .uni-steps__finish-line { background-color: green !important; } ``` 上述方法适用于想要统一管理整个应用程序内所有实例风格的情况[^1]。 #### 局部作用域内的样式重写 对于仅需针对特定页面或局部区域更改 `uni-steps` 外观的情形，在对应页面的 `<style scoped>` 中加入相应规则即可： ```html <template> <view class="custom-step"> <!-- 这里的 customStepClass 将会应用于 uni-steps --> <uni-steps :options="stepsOptions" activeColor="#FF0000"></uni-steps> </view> </template> <style lang="scss" scoped> .custom-step /deep/ .uni-steps__item-title { font-size: 18px; color: blue; } .custom-step /deep/ .uni-steps--horizontal .uni-steps__finish-line, .custom-step /deep/ .uni-steps--vertical .uni-steps__finish-line { height: 6px; border-radius: 3px; background-color: orange; } </style> ``` 这里使用了 `/deep/` 深度选择器来穿透 Vue 单文件组件的作用范围限制，从而能够有效地影响子组件内部元素的样式[^2]。 #### 利用属性配置简化操作 除了直接编写 CSS 来控制显示效果外，还可以利用 `uni-steps` 提供的一些内置属性快速设置某些视觉特性，比如通过 `activeColor` 参数指定激活状态下线条及文字的颜色等: ```html <uni-steps :options="stepsData" activeColor="#ff5722"></uni-steps> ``` 这种方法简单直观，适合那些只需要做少量改动的需求场景[^3]。 #### 实现示例 下面给出一段完整的 HTML 和 JavaScript 结合的例子，展示了如何在一个简单的页面上加载并美化 `uni-steps` 组件： ```html <template> <view> <text>订单处理流程：</text> <uni-steps :options="orderProcessSteps" direction="column" activeColor="#E91E63"/> </view> </template> <script> export default { data() { return { orderProcessSteps: [ {title: '提交订单', desc: ''}, {title: '支付成功', desc: ''}, {title: '商家接单', desc: ''}, {title: '配送途中', desc: ''}, {title: '完成交易', desc: ''} ] } } }; </script> <style lang="scss" scoped> /deep/ .uni-steps--column .uni-steps__head{ width: 24rpx; height: 24rpx; } /deep/ .uni-steps--column .uni-steps__line{ left: 12rpx; top: 12rpx; bottom: -12rpx; width: 2rpx; } /deep/ .uni-steps--column .uni-steps__icon-wrap{ line-height: 24rpx; } /deep/ .uni-steps--column .uni-steps__content{ padding-left: 36rpx; } </style> ``` 此段代码不仅设置了垂直方向上的步骤指示器布局方式(`direction="column"`),还特别优化了各部分之间的间距以及图标大小等问题,使得整体看起来更加美观协调.