vue+elementui el-switch按钮的文字居内
效果图代码UI图需求是将文字放在switch里面 , 而elementui默认的文字是在外面,这时候就要改样式了,可根据需求更改下面代码样式。<el-switchv-model="allActive"active-text="关"inactive-text="开"active-color="#3979FC"inactive-color="rgba(0, 0, 0, 0.2)">
·
效果图
代码
UI图需求是将文字放在switch里面 , 而elementui默认的文字是在外面,这时候就要改样式了,可根据需求更改下面代码样式。
<el-switch
v-model="allActive"
active-text="关"
inactive-text="开"
active-color="#3979FC"
inactive-color="rgba(0, 0, 0, 0.2)">
</el-switch>
::v-deep .el-switch__core {
width: 44px;
height: 24px;
border-radius: 100px;
border: none;
}
::v-deep .el-switch__core::after {
width: 20px;
height: 20px;
top: 2px;
}
::v-deep .el-switch.is-checked .el-switch__core::after {
margin-left: -21px;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--right {
position: absolute;
z-index: 1;
right: 6px;
margin-left: 0px;
color: rgba(255, 255, 255, 0.9019607843137255);
span {
font-size: 12px;
}
}
/* 激活时另一个文字消失 */
::v-deep .el-switch__label.is-active {
display: none;
}
/*开启时文字位置设置*/
::v-deep .el-switch__label--left {
position: absolute;
z-index: 1;
left: 5px;
margin-right: 0px;
color: rgba(255, 255, 255, 0.9019607843137255);
span {
font-size: 12px;
}
}
更多推荐
已为社区贡献6条内容
所有评论(0)