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;
}
效果: