相信很多人都會(huì)有這樣的需求
但是自從Element UI 棄用了on-text和off-text 以后乔外，怎么把文字放在開(kāi)關(guān)內(nèi)顯示呢，這里提供一種解決方案。
關(guān)于el-switch的官方文檔
從文檔中我們可以看到巢株，現(xiàn)在想要讓文字顯示對(duì)應(yīng)開(kāi)關(guān)的操作只能用 active-text 和 inactive-text 。
<el-switch
v-model="value1"
active-text="是"
inactive-color="#BFBFBF" //因?yàn)橛玫目蚣躠ctive-color已經(jīng)有主題色了所以這里只設(shè)置inactive的顏色熙涤，為了讓文字顯示的更明顯阁苞。
inactive-text="否"
active-value="1"
inactive-value="0"
@change="test" />
在styles中新建一個(gè)switch.scss的樣式文件，并在index中引入灭袁。
通過(guò)改變文字的位置猬错，做出這種好像是在開(kāi)關(guān)上面顯示文字的效果。
.el-switch__label {
position: absolute;
display: none;
font-size: 11px !important;
color: #fff!important;
}
.el-switch__label *{
font-size: 11px !important;
}
/*打開(kāi)時(shí)文字位置設(shè)置*/
.el-switch__label--right {
z-index: 1;
right: -10px; // 這里是重點(diǎn)
top: 0.5px;
}
/*關(guān)閉時(shí)文字位置設(shè)置*/
.el-switch__label--left {
z-index: 1;
left: 23px; // 這里是重點(diǎn)
top: 0.5px;
}
/*顯示文字*/
.el-switch__label.is-active {
display: block;
}
.el-switch__core {
width: 45px;
height: 22px;
border: 2px solid #DCDFE6;
border-radius: 13px;
}
至此大功告成了茸歧，覺(jué)得對(duì)你有幫助的話(huà)倦炒，不妨隨手點(diǎn)個(gè)贊再走吖~
