element ui switch开关文字显示

默认效果：

image.png

期待的效果：

image.png

代码

补充：在vue项目中使用了scss，并且用scoped防止样式污染。使用scoped会导致使用其他组件时类名加不上自定义样式的问题，可用/deep/解决。可参考/deep/ 深度选择器
Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。

<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开关文字显示