编程大白话之-Vue .el-switch开关样式修改

开发过程中使用element-ui所遇到的一个需求

默认效果：

image.png

期望效果：

image.png

<meta charset="utf-8">

补充：在vue项目中使用了scss，并且用scoped防止样式污染。使用scoped会导致使用其他组件时类名加不上自定义样式的问题，可用/deep/解决。可参考/deep/ 深度选择器
Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。

1.png 2.png

网上有很多全局设置，也可以尝试通过deep来进行修改设置

.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;
}