Element-UI的Switch 开关修改为字在按钮上

1、Element-UI的Switch 开关用法

http://element-cn.eleme.io/#/zh-CN/component/switch

2、修改后的示意图

3、样式修改




样式(修改Element-UI的Switch 开关的默认样式类):

.el-switch__label--left{
  position: relative;
  left: 46px;
  color: #fff;
  z-index: -1111;
}
.el-switch__label--right{
  position: relative;
  right: 46px;
  color: #fff;
  z-index: -1111;
}
.el-switch__label.is-active{
  z-index: 1111;
  color: #fff;
}

4、打开关闭时的字体颜色不同

.el-switch__label--left{
  position: relative;
  left: 46px;
  color: #fff;
  z-index: -1111;
}
.el-switch__label--right{
  position: relative;
  right: 46px;
  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;
}

效果:

你可能感兴趣的:(Element-UI)