Element UI el-switch开关根据判断条件控制状态改变

场景

在点击el-switch的时候状态不变，会弹出一个message弹窗，进行confirm后在改变其状态（如有改变状态的条件可以在confirm弹窗里面的回调里进行判断）

<!-- 此处不能使用v-model -->

 <el-switch
    :value="activeRef"
    @input="handleInput($event)"
    @click.native="handleSwitchClick"
/>

// 拦截了组件本身对值的修改 
//接下来就是弹出的confirm的消息弹窗来作出是否修改的判断

handleInput(event) {
  // intercept the change event of the value
  // suppose the value type is boolean
  if (typeof this.value === "boolean") {
    this.value = !event;
  } else {
    // suppose the value type is number | string
    this.value =
      this.activeVal === event ? this.inactiveVal : this.activeVal;
  }
}

handleSwitchClick() {
  this.$confirm("是否改变switch的值?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 通过判断条件来控制状态是否改变
      // suppose the value type is boolean
      this.sVal = !this.sVal;
      
	  // suppose the value type is number | string
	  this.sVal = this.activeVal === this.sVal ? this.inactiveVal : this.activeVal;
    })
    .catch(() => {
      // do nothing
    });
},