Vue .el-switch开关样式修改

相信很多人都会有这样的需求

但是自从Element UI 弃用了on-text和off-text 以后，怎么把文字放在开关内显示呢，这里提供一种解决方案。
关于el-switch的官方文档

从文档中我们可以看到，现在想要让文字显示对应开关的操作只能用 active-text 和 inactive-text 。

<el-switch 
  v-model="value1" 
  active-text="是" 
  inactive-color="#BFBFBF" //因为用的框架active-color已经有主题色了所以这里只设置inactive的颜色，为了让文字显示的更明显。
  inactive-text="否" 
  active-value="1" 
  inactive-value="0" 
  @change="test" />

在styles中新建一个switch.scss的样式文件，并在index中引入。
通过改变文字的位置，做出这种好像是在开关上面显示文字的效果。

.el-switch__label {
  position: absolute;
  display: none;
  font-size: 11px !important;
  color: #fff!important;
}
.el-switch__label *{
  font-size: 11px !important;
}
/*打开时文字位置设置*/
.el-switch__label--right {
  z-index: 1;
  right: -10px; // 这里是重点
  top: 0.5px;
}
/*关闭时文字位置设置*/
.el-switch__label--left {
  z-index: 1;
  left: 23px; // 这里是重点
  top: 0.5px;
}
/*显示文字*/
.el-switch__label.is-active {
  display: block;
}
.el-switch__core {
  width: 45px;
  height: 22px;
  border: 2px solid #DCDFE6;
  border-radius: 13px;
}

至此大功告成了，觉得对你有帮助的话，不妨随手点个赞再走吖~

Vue .el-switch开关样式修改

推荐阅读更多精彩内容