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>
)
