默認效果：

image.png

期待的效果：

image.png

代碼

補充：在vue項目中使用了scss，并且用scoped防止樣式污染。使用scoped會導致使用其他組件時類名加不上自定義樣式的問題，可用/deep/解決?？蓞⒖?a target="_blank">/deep/ 深度選擇器
Scoped CSS規(guī)范是Web組件產生不污染其他組件，也不被其他組件污染的CSS規(guī)范。

<template>
  <el-switch
    v-model="switchName"
    active-color="#179BFF"
    :active-text="showName"
    active-value="1"
    inactive-value="2"
    :width="54"
    disabled
  ></el-switch>云端存儲：
</template>

<script>
export default {
  data() {
    switchName: '1' // 表示默認為開啟
   },
  computed: {
    showName() {
      return this.form.cloudStore === '1' ? '開啟' : '關閉'
    }
  },
}
</script>

<style lang='scss' scoped>
  /deep/ .el-switch {
    position: relative;
    height: 24px;
    line-height: 24px;
    &.is-checked {
      .el-switch__core {
        background: #179bff;
        &:after {
          margin-left: -22px;
        }
      }
    }
    .el-switch__label,
    .el-switch__core {
      height: 24px;
    }
    .el-switch__core {
      border-radius: 12px;
      border: none;
      background: #f1f1f1;
      &:after {
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.3);
        width: 22px;
        height: 22px;
      }
    }
    .el-switch__label.is-active {
      color: #333;
    }
    .el-switch__label--right {
      margin-left: 0px;
      &.is-active {
        color: #fff;
        right: 24px;
      }
      position: absolute;
      right: 5px;
      top: -1px;
      color: #999;
      > span {
        font-size: 12px;
      }
    }
  }
</style>

這篇也可以element switch開關文字顯示