Element ui 中将switch开关自定义文字描述(ON/OFF)显示在开关里面

Element ui 中将switch开关自定义文字描述(ON/OFF)显示在开关里面

官网示例
可以看出文字描述在开关两边,看着很别扭.

上代码

<el-switch
  v-model="ListData.value"
  active-color="#13ce66"
  inactive-color="#6D7074"
  active-text="ON"
  inactive-text="OFF"
>
</el-switch>

注:自定义颜色与文字描述 :
开始的颜色和关闭的颜色 ,自行更改
active-color="#13ce66"
inactive-color="#6D7074"
开关开启时的文字描述和开关关闭时的文字描述,自行更改
active-text=“ON”
inactive-text=“OFF”

CSS样式:根据自己需求进行调整

.el-switch__label * {
    line-height: 1;
    font-size: 12px;
    display: inline-block;
  }
 .el-switch__label {
    position: absolute;
    display: none;
    color: #fff !important;
    font-size: 12px !important;
  }
  /*打开时文字位置设置*/
.el-switch__label--right {
    z-index: 1;
    right: 22px;
  }
  /*关闭时文字位置设置*/
.el-switch__label--left {
    z-index: 1;
    left: 20px;
  }
  /*显示文字*/
.el-switch__label.is-active {
    display: block;
  }
   /*开关宽度*/
.el-switch .el-switch__core,
  .el-switch .el-switch__label {
    width: 50px !important;
  }

效果图: