思路:change中提供了参数val,可以根据当前点击的状态true/false来判断当前开启/关闭的状态
代码: 在线运行
<template>
<el-switch
v-model="value"
:active-text="value? '是' : '否'"
@change="changeIsNeedHint"
>
</el-switch>
</template>
<script>
data() {
return {
value: true
}
},
methods: {
changeIsNeedHint(val){
if(val === false) return false; // 如果当前状态为关闭,则不提示
this.$confirm(`你触发了click事件`, "提示", {
confirmButtonText: "我知道了",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
// 点击 我知道了 之后的提示
this.$message({
type: "success",
message: "已触发click"
})
}).catch(() => {
// 点击 取消 之后的提示
this.$message({
type: "info",
message: "已取消操作"
})
})
}
}
</script>