產品需求：在按鈕內內嵌對應操作文字

原生展示效果：

el-switch在按鈕內加文字內嵌文字_ci

升級展示效果：

el-switch在按鈕內加文字內嵌文字_ci_02

解決方案

完整代碼實現

HTML模板部分

<template>
  <div>
    <el-switch 
      v-model="fieldForm.state" 
      class="main-el-switch"
      active-text="開啓" 
      inactive-text="關閉">
    </el-switch>
  </div>
</template>

JavaScript數據部分

<script>
export default {
  data() {
    return {
      fieldForm: {
        state: true  // 開關狀態，true為開啓，false為關閉
      }
    }
  }
}
</script>

CSS樣式部分

<style scoped>
::v-deep .main-el-switch {
  position: relative;
}

::v-deep .main-el-switch .el-switch__core {
  height: 24px;
  border-radius: 12px;
  min-width: 65px;
}

::v-deep .main-el-switch .el-switch__core:after {
  left: 4px;
  top: 3px;
}

::v-deep .main-el-switch .el-switch.is-checked .el-switch__core:after {
  margin-left: -20px;
  left: 100%;
}

::v-deep .main-el-switch .is-checked .el-switch__label--left {
  opacity: 0;
}

::v-deep .main-el-switch .is-checked .el-switch__label--right {
  opacity: 1;
}

::v-deep .main-el-switch .el-switch__label {
  position: absolute;
  top: 0;
}

::v-deep .main-el-switch .el-switch__label--left {
  right: 0;
  color: #999;
  z-index: 1;
  margin-right: 8px;
}

::v-deep .main-el-switch .el-switch__label--right {
  left: 0;
  color: #fff;
  opacity: 0;
  margin-left: 8px;
}
</style>