el-switch文字内置

原创于 2025-06-09 18:24:09 发布 · 326 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

el-switch文字内置

效果

默认关

vue


<div style="color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div>
<el-switch v-model="value" active-color="#3E99FB" inactive-color="#DCDFE6" 
active-text="开" inactive-text="关">
</el-switch>

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

css

<style lang="css" scoped>

::v-deep .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
 
/*打开时文字位置设置*/
::v-deep .el-switch__label--right {
  z-index: 1;
  right: 20px;
}
 
/*关闭时文字位置设置*/
::v-deep .el-switch__label--left {
  z-index: 1;
  left: 20px;
}
 
/* 显示文字 */
::v-deep .el-switch__label.is-active {
  display: block;
}
</style>