vue+elementui el-switch按钮的文字居内

效果图

代码

UI图需求是将文字放在switch里面 ， 而elementui默认的文字是在外面，这时候就要改样式了，可根据需求更改下面代码样式。

      <el-switch
        v-model="allActive"
        active-text="关"
        inactive-text="开"
        active-color="#3979FC"
        inactive-color="rgba(0, 0, 0, 0.2)">
      el-switch>

	::v-deep .el-switch__core {
      width: 44px;
      height: 24px;
      border-radius: 100px;
      border: none;
    }
    ::v-deep .el-switch__core::after {
      width: 20px;
      height: 20px;
      top: 2px;
    }
    ::v-deep .el-switch.is-checked .el-switch__core::after {
      margin-left: -21px;
    }
    /*关闭时文字位置设置*/
    ::v-deep .el-switch__label--right {
      position: absolute;
      z-index: 1;
      right: 6px;
      margin-left: 0px;
      color: rgba(255, 255, 255, 0.9019607843137255);
      span {
        font-size: 12px;
      }
    }
    /* 激活时另一个文字消失 */
    ::v-deep .el-switch__label.is-active {
      display: none;
    }
    /*开启时文字位置设置*/
    ::v-deep .el-switch__label--left {
      position: absolute;
      z-index: 1;
      left: 5px;
      margin-right: 0px;
      color: rgba(255, 255, 255, 0.9019607843137255);
      span {
        font-size: 12px;
      }
    }