Element-UI的Switch 开关修改为字在按钮上
1、Element-UI的Switch 开关用法
http://element-cn.eleme.io/#/zh-CN/component/switch
【Element-UI的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;
}效果：
文章图片
推荐阅读
- 热闹中的孤独
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 布丽吉特，人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事，我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量