修改element-ui中的switch样式。

1、如下为将要实现的ui样式。

 2、switch中的样式为如下。可以发现在启用的时候应该为绿色，禁用的时候应该为红色才对。

 

代码如下：

  <el-switch
    v-model="value2"
    class="mb-2"
    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
    active-text="禁用"
    inactive-text="启用"
  />

3、当我们通过将active-text和inactive-text的值和颜色的值交换可以达到第一步的效果。但是会发现与绑定的布尔值是相反的。即当布尔值为true时，显示的是禁用一端，当布尔值为false时显示开启一端。显然是不行的。

这时可以通过如下方法解决：

1、不对active-text和inactive-text，以及--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949的值交换。

2、在style中加入如下样式,主要是通过样式穿透改变switch原有的css样式。即可达到产品想要的结果。

// 控制switch
::v-deep .el-switch.is-checked .el-switch__core .el-switch__action {
  left: 1px !important;
}

::v-deep .el-switch__core .el-switch__action {
  left: calc(100% - 17px) !important;
}