1.展示效果
![](https://img-blog.csdnimg.cn/direct/5d2321a9dad9455d9a8ed89c2ec601b0.png)
![](https://img-blog.csdnimg.cn/direct/ea0acce7eef04810b111327c76031547.png)
2.代码实现
<template>
<el-switch
class="demo"
v-model="yctb"
active-text="开"
inactive-text="关"
>
</el-switch>
</template>
<script>
export default {
data() {
return:{
yctb:false
}
}
}
</script>
<style lang="scss" scoped>
::v-deep .el-switch {
position: relative;
}
::v-deep .el-switch__label {
z-index: 2;
position: absolute;
color: #fff;
visibility: hidden;
}
::v-deep .el-switch__label.is-active {
visibility: inherit;
color: #fff;
}
::v-deep .el-switch__label--left {
left: 50%;
}
::v-deep .el-switch__label--right {
left: -6px;
}
</style>