在使用 Elementui 开发项目的时候, 在表单页面会用到开关, 类比其他 UI 框架, 如果开关能够显示文字, 对于用户理解有很大的帮助. 所以优化了下这个功能:
- <el-switch class="main-switch" width="60"
- :active-value="1"
- :inactive-value="0"
- v-model="switchValue1"
- inactive-text="禁止"
- active-text="启用">
- </el-switch>
样式: 把原来的开关大小调大了一些
- .main-switch{
- position: relative;
- }
- .main-switch .el-switch__core{
- height: 24px; border-radius: 12px;
- }
- .main-switch .el-switch__core:after{
- left: 4px;
- }
- .main-switch.el-switch.is-checked .el-switch__core::after{
- margin-left: -20px;
- }
- .main-switch .el-switch__core:after{
- top: 3px;
- }
- .main-switch .el-switch__label{
- position: absolute; top: 0;
- }
- .main-switch .el-switch__label--left{
- right: 0; color: #999; z-index: 1; margin-right: 8px;
- }
- .main-switch .el-switch__label--right{
- left: 0; color: #fff; opacity: 0; margin-left: 8px;
- }
- .main-switch.is-checked .el-switch__label--left{
- opacity: 0;
- }
- .main-switch.is-checked .el-switch__label--right{
- opacity: 1;
- }
预览效果:
到此结束!
来源: http://www.bubuko.com/infodetail-3802280.html