开关内部文字显示

普通开关：组件 | Element

<el-switch
  style="display: block"
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949"
  active-text="按月付费"
  inactive-text="按年付费">
</el-switch>

<script>
  export default {
    data() {
      return {
        value: true
      }
    }
  };
</script>

显示效果

---

 

文字显示在开关内部

<el-switch
    v-model="value"
    class="tableScopeSwitch"
    active-value="Y"
    inactive-value="N"
    active-text="在线"
    inactive-text="离线"
/>

 css样式

<style lang="scss" scoped>
.tableScopeSwitch {
  margin-right: 5px;
}
.tableScopeSwitch ::v-deep .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
  font-size: 12px;
}
::v-deep .el-switch.is-checked .el-switch__core::after {
  left: 100%;
  margin-left: -20px;
}
/*打开时文字位置设置*/
.tableScopeSwitch ::v-deep .el-switch__label--right {
  z-index: 1;
  left: 2px;
  height: 23px;
}
.tableScopeSwitch ::v-deep .el-switch__core:after {
  width: 20px;
  height: 20px;
}
/*关闭时文字位置设置*/
.tableScopeSwitch ::v-deep .el-switch__label--left {
  z-index: 1;
  right: 2px; 
  height: 23px;
}
/*显示文字*/
.tableScopeSwitch ::v-deep .el-switch__label.is-active {
  display: block;
}
::v-deep.el-switch .is-checked .el-switch__core::after {
  left: 100%;
}
.tableScopeSwitch ::v-deep .el-switch__core,
::v-deep .el-switch {
  width: 65px !important; 
  height: 25px;
  line-height: 25px;
  border-radius: 13px;
}
</style>