一、需求
通过css改变el-switch大小
二、功能实现
.el-switch__core {
width: 30px !important;
height: 16px;
}
.el-switch__core::after {
width: 14px;
height: 14px;
margin-top: -1px;
}
.el-switch.is-checked .el-switch__core::after{
margin-left: -15px;
}
【element-ui之改变el-switch开关组件的大小】原效果:
![element-ui之改变el-switch开关组件的大小](https://img.it610.com/image/info9/3eacf5e50cd34d45bfb5e09494f44e8e.jpg)
文章图片
修改后效果:
![element-ui之改变el-switch开关组件的大小](https://img.it610.com/image/info9/e953df9b87dc4d3eabb461e79a36c79f.jpg)
文章图片