el-switch 点击按钮先弹窗提示点击确认后再改变状态值

在Vue中使用Element UI的el-switch组件时，可以通过监听change事件来实现点击按钮先弹窗提示，确认后才改变状态值的功能。以下是一个简单的示例：

<template>
  <el-switch
    v-model="switchValue"
    active-color="#13ce66"
    inactive-color="#ff4949"
    @change="handleSwitchChange"
  >
  </el-switch>
</template>
 
<script>
export default {
  data() {
    return {
      switchValue: false
    };
  },
  methods: {
    handleSwitchChange(newValue) {
      this.$confirm('确认要进行此操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.switchValue = newValue;
      }).catch(() => {
        this.switchValue = !newValue; // 取消时恢复原状态
      });
    }
  }
};
</script>

在这个例子中，el-switch的v-model绑定了switchValue变量，它的值为true或false。当用户尝试改变开关状态时，会触发handleSwitchChange方法。这个方法使用$confirm方法弹出一个确认对话框，用户确认后switchValue的值会被更新，取消时则会恢复到原来的状态。这样就实现了点击el-switch按钮前的弹窗提示功能。