element Switch开关开启时触发click事件,关闭时不触发

1,559 阅读1分钟

思路:change中提供了参数val,可以根据当前点击的状态true/false来判断当前开启/关闭的状态 image.png 代码: 在线运行

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