如图所示
<template>
<div style="margin:50px 100px;">
<el-switch
v-model="value"
active-text="启用"
inactive-text="停用"
>
</el-switch>
</div>
</template>
<script>
export default {
data() {
return {
value: true
}
}
}
</script>
<style lang="less">
.el-switch__label--left {
position: relative;
left: 60px;
color: #fff;
z-index: -1111;
}
.el-switch__core{
width: 60px !important;
}
.el-switch__label--right {
position: relative;
right: 60px;
color: #fff;
z-index: -1111;
}
.el-switch__label--right.is-active {
z-index: 1111;
color: #fff !important;
}
.el-switch__label--left.is-active {
z-index: 1111;
color: #9c9c9c !important;
}
</style>