设置el-switch开关颜色

### 自定义 Element UI `el-switch` 开关的颜色 在 Element UI 的 `el-switch` 组件中，可以通过属性 `active-color` 和 `inactive-color` 来分别设置开关处于激活状态和非激活状态时的颜色[^1]。此外，还可以通过 CSS 变量的方式实现颜色的自定义[^2]。 以下是具体的配置方法以及示例代码： #### 方法一：使用 `active-color` 和 `inactive-color` 属性 这是最简单直接的方法，适用于大多数场景。只需在 `<el-switch>` 标签上绑定这两个属性即可完成颜色定制。 ```html <template> <div> <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"> </el-switch> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const value = ref(false); return { value }; } }; </script> ``` 上述代码中，当开关被打开时会显示绿色 (`#13ce66`)；关闭时则显示红色 (`#ff4949`) 。 --- #### 方法二：利用 CSS 变量覆盖默认样式 如果项目中有统一的主题需求或者需要动态调整主题色，则推荐使用此方式。通过设置 `--el-switch-on-color` 和 `--el-switch-off-color` 这两个变量来自定义颜色。 ```html <template> <div> <el-switch v-model="value2" class="custom-switch" /> </div> </template> <style scoped> .custom-switch .el-switch__core { --el-switch-on-color: #409eff; --el-switch-off-color: #f56c6c; } </style> <script> import { ref } from 'vue'; export default { setup() { const value2 = ref(true); return { value2 }; } }; </script> ``` 在此例子中，CSS 变量替代了传统的 `active-color` 和 `inactive-color` 属性，从而实现了更灵活的颜色管理。 --- #### 方法三：结合文字描述与颜色设定 为了增强用户体验，在某些情况下可能还需要为开关添加 ON/OFF 文字提示。此时可借助 `active-text` 和 `inactive-text` 属性配合颜色一起使用[^3]。 ```html <template> <div> <el-switch v-model="ListData.value" active-color="#13ce66" inactive-color="#ff4949" active-text="ON" inactive-text="OFF" ></el-switch> </div> </template> <script> const ListData = reactive({ value: true, }); export default { data() { return { ListData }; }, }; </script> ``` 这段代码不仅设置了两种状态下不同的背景色，还增加了对应的英文标签说明。 --- #### 总结 以上三种方法均能有效满足对 `el-switch` 颜色的不同层次的需求。对于简单的静态页面可以选择第一种方案快速部署；而对于大型应用或有复杂交互逻辑的情况建议采用第二种甚至第三种策略以提升维护性和扩展性。