技術標籤：vueelement-uivueelementui

前言

由於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);
      }
    }
  }
}