el-switch文字内置

el-switch文字内置

效果

vue

<div style="color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div>
<el-switch v-model="value" active-color="#3E99FB" inactive-color="#DCDFE6" 
active-text="开" inactive-text="关">
</el-switch><script>export default {data() {return {value: true}}};
</script>              

css

<style lang="css" scoped>::v-deep .el-switch__label {position: absolute;display: none;color: #fff;
}/*打开时文字位置设置*/
::v-deep .el-switch__label--right {z-index: 1;right: 20px;
}/*关闭时文字位置设置*/
::v-deep .el-switch__label--left {z-index: 1;left: 20px;
}/* 显示文字 */
::v-deep .el-switch__label.is-active {display: block;
}
</style>