ElementUI的switch组件文字显示在按钮上

lamCCH

已于 2022-11-15 09:20:32 修改

阅读量1.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： element组件 vue 文章标签： elementui 前端 javascript

于 2022-11-15 09:18:15 首次发布

本文链接：https://blog.csdn.net/chenlim87/article/details/127859325

vue 同时被 2 个专栏收录

25 篇文章

订阅专栏

element组件

8 篇文章

订阅专栏

switch原本的样式如图，文字显示在两边，感觉有歧义。我们想让开关打开的时候只显示未过期。

其实只要修改它的样式就可以达到我们要的效果。

首先给`switch`添加一个类名：

修改样式：

<style lang="scss">
// 自定义switch样式
.mySwitch {
  .el-switch__label--left {
    position: relative;
    left: 70px;
    color: #fff;
    z-index: -1111;
    span {
      width: 40px;
    }
  }
  .el-switch__label--right {
    position: relative;
    right: 70px;
    color: #fff;
    z-index: -1111;
    span {
      display: inline-block;
      width: 40px;
    }
  }
  .el-switch__core {
    width: 65px !important;
  }
  .el-switch__label--right.is-active {
    z-index: 10;
    color: #fff !important;
  }
  .el-switch__label--left.is-active {
    z-index: 10;
    color: #9c9c9c !important;
  }
}
</style>