el-switch 小球的左右颜色修改

el-switch 是 Element UI 提供的一个开关组件，它通常包含两个状态：左面通常是关闭状态，显示一种颜色；右面则是打开状态，显示另一种颜色。如果你想修改小球的左右颜色，你可以通过调整它的 `active-color` 和 `inactive-color` 样式属性来改变。

例如，在 CSS 中，你可以这样做：

.el-switch {
  /* 原始默认值 */
  .el-switch__core {
    color: #009688; /* 这是激活时的颜色，默认值 */
    background-color: transparent;
  }

  .el-switch__inner {
    /* 修改小球颜色 */
    border-color: your-custom-color-left; /* 左边关闭时的颜色 */
  }

  .el-switch__active .el-switch__inner {
    border-color: your-custom-color-right; /* 右边打开时的颜色 */
  }
}

在这里，`your-custom-color-left` 和 `your-custom-color-right` 应替换为你想要的实际颜色值。

如果你是在 Vue.js 中操作，可以在对应的样式类上绑定计算属性，动态设置颜色：

<template>
  <el-switch v-bind:class="{ 'custom-color-left': isLeftColor, 'custom-color-right': !isLeftColor }">
    <span slot="handle"></span>
  </el-switch>
</template>

<script>
export default {
  data() {
    return {
      isLeftColor: true, // 初始状态决定哪一边是定制颜色
    };
  },
  computed: {
    switchColors() {
      return this.isLeftColor ? 'your-custom-color-left' : 'your-custom-color-right';
    },
  },
};
</script>

记得将 `'your-custom-color-left'` 和 `'your-custom-color-right'` 替换为你的实际颜色选择，并在需要切换时更新 `isLeftColor` 的值。