element ui 中的开关按钮样式改变

最新推荐文章于 2024-08-15 23:24:36 发布

今天你码了吗

最新推荐文章于 2024-08-15 23:24:36 发布

阅读量577

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_50249353/article/details/126548204

版权

vue 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

el-switch样式改变

下面是element ui的switch样式感觉不是我想要的
在这里插入图片描述
想变成这个样子的
关闭状态

可以为el-switch添加样式

::v-deep .btnStyle {
  .el-switch__core {
    width: 60px !important;
  }
  .el-switch__label--right {
    position: relative;
    right: 60px;
    color: #fff;
    z-index: -1111;
  }
  .el-switch__label--left {
    position: relative;
    left: 60px;
    color: #fff;
    z-index: -1111;
  }
  .el-switch__label--right.is-active {
    z-index: 1111;
    color: #fff !important;
  }
  .el-switch__label--left.is-active {
    z-index: 1111;
    color: #9c9c9c !important;
  }
}

专门写一个类 btnStyle 如果style样式有 scoped的话使用穿透效果加::v-deep 就可以了