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

思路 :change中提供了参数val,可以根据当前点击的状态true/false来判断当前开启/关闭的状态 代码 : 在线运行 < template > < el - switch v - model = "value" : active...

这篇文章已从掘金同步到个人博客,原始发布地址为 掘金原文

思路: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>