vue+elementui el-switch按钮的文字居内

果粒橙er

已于 2022-03-23 10:06:39 修改

阅读量3.7k

点赞数 3

分类专栏：笔记文章标签： vue.js elementui 前端 css

于 2022-03-23 09:50:15 首次发布

本文链接：https://blog.youkuaiyun.com/MissChengispink/article/details/123678102

版权

笔记专栏收录该内容

15 篇文章

订阅专栏

本文档介绍如何通过修改ElementUI的样式，将开关组件Switch的文字显示在内部，包括调整开关尺寸、圆角、颜色以及文字位置等，实现自定义UI效果。涉及到的关键CSS选择器有`::v-deep.el-switch__core`、`::v-deep.el-switch__core::after`、`::v-deep.el-switch.is-checked.el-switch__core::after`、`::v-deep.el-switch__label--right`和`::v-deep.el-switch__label--left`等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

代码

UI图需求是将文字放在switch里面，而elementui默认的文字是在外面，这时候就要改样式了，可根据需求更改下面代码样式。

      <el-switch
        v-model="allActive"
        active-text="关"
        inactive-text="开"
        active-color="#3979FC"
        inactive-color="rgba(0, 0, 0, 0.2)">
      </el-switch>

	::v-deep .el-switch__core {
      width: 44px;
      height: 24px;
      border-radius: 100px;
      border: none;
    }
    ::v-deep .el-switch__core::after {
      width: 20px;
      height: 20px;
      top: 2px;
    }
    ::v-deep .el-switch.is-checked .el-switch__core::after {
      margin-left: -21px;
    }
    /*关闭时文字位置设置*/
    ::v-deep .el-switch__label--right {
      position: absolute;
      z-index: 1;
      right: 6px;
      margin-left: 0px;
      color: rgba(255, 255, 255, 0.9019607843137255);
      span {
        font-size: 12px;
      }
    }
    /* 激活时另一个文字消失 */
    ::v-deep .el-switch__label.is-active {
      display: none;
    }
    /*开启时文字位置设置*/
    ::v-deep .el-switch__label--left {
      position: absolute;
      z-index: 1;
      left: 5px;
      margin-right: 0px;
      color: rgba(255, 255, 255, 0.9019607843137255);
      span {
        font-size: 12px;
      }
    }