使用伪类将el-switch文字放在内部

前言

由于switch是放在table里的，如果文字放在外面，样式会比较不好看。如果单独写一个浪费造轮子，我们直接动态添加类名，应该可以实现类似的效果，所以就可以使用伪类进行添加文字。

效果

源码

  <el-switch
            :width="60"
            :value="getTaskSubscribeState(row)"
            active-color="#3399FF"
            inactive-color="#CCCCCC"
            active-value="1"
            inactive-value="0"
            :class="{
              'switch-is-actived': getTaskSubscribeState(row) === '1',
            }"
          >
 </el-switch>

.el-switch {
  /deep/ .el-switch__core {
    &::before {
      content: '关闭';
      color: #fff;
      position: absolute;
      // font-size: 14px;
      transform: scale(0.85);
      left: 20px;
    }
  }
  &.switch-is-actived {
    /deep/ .el-switch__core {
      &::before {
        content: '开启';
        left: 10px;
        transform: scale(0.85);
      }
    }
  }
}