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
查找好久找到这个方法 记录一下
