Vue3 + Element plus 实现切换el-radio前二次确认

Vue3 + Element plus 实现切换el-radio前二次确认
场景：点击切换el-radio之前判断当前内容是否有改变，如有改变弹窗提示切换el-radio将销毁操作，弹窗二次确认是否切换
问题： el-radio 没有提供类似于beforeUpdate这样的钩子去处理这种场景，之外使用v-model语法糖绑定数据即使做了判断，值也立刻更改了。我们需要做的是在值更改之前做一个拦截，如果确定切换则赋新值，否则保留原值不变。

以上思路有了首先将v-model 语法糖切换为:value + @input
实现效果:
在这里插入图片描述


<el-radio-group  @input="InputHandle" :model-value="cardForm.add_img_type" >
     <el-radio label="1">1:1</el-radio>
     <el-radio label="2">3:4</el-radio>
</el-radio-group>

再用InputHandle事件对切换进行监听

// 切换前询问
const InputHandle = async (value: any) => {
  console.log(value.target._value, "val");
  let title = ref("1:1");
  if (value.target._value == "1") {
    title.value = "1:1";
  } else {
    title.value = "3:4";
  }
  ElMessageBox.confirm(
    `是否确定切换图片比例为${title.value},确定切换后,当前上传的图片将被移除`,
    `切换比例到${title.value}`,
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      // 用户确认后，更新值  继续操作等等
      cardForm.add_img_type = value.target._value;
      // .............
      ElMessage({
        type: "success",
        message: "切换成功",
      });
    })
    .catch(() => {
      // 用户取消，不执行任何操作，值保持不变
      // 可以通过 emit 触发一个自定义事件，如果需要的话
      // emit('update:modelValue', cardForm.value.add_img_type); // 如果你使用了 v-model 的自定义名称，可能需要这样触发更新
      ElMessage({
        type: "info",
        message: "取消切换",
      });
    });
};

在这里插入图片描述
我的element-plus版本
查阅element-plus文档才发现element-plus el-raido现在使用:model-value来绑定值之前使用的是value
文档参考了:https://www.jianshu.com/p/104e8c165a28
查找好久找到这个方法记录一下