Vue3 + Element plus 实现切换el-radio

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

以上思路有了 首先将v-model 语法糖 切换为:value + @input

<el-radio-group @input="changeLinkType" :value="linkageType" >

     <el-radio label="app">app</el-radio>

     <el-radio label="dept">dept</el-radio>

</el-radio-group>

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

const changeLinkType = (value) => {
  let isDataSave;
//判断是否保存了当前页面数据 如果保存了直接切换 没有保存进行二次确认
  emit("isDataSave", (val) => {
    isDataSave = val;
  });
  if (isDataSave) {
    ElMessageBox.confirm(
      "Your data has not been saved yet. Switching to link type will clear the unsaved data. Are you sure to switch？",
      "Change Link Type?",
      {
        confirmButtonText: "Sure",
        cancelButtonText: "Cancel",
        type: "warning",
      }
    )
      .then(() => {
      //这里input获取到的value 并不是对应切换的值 而是event事件
     //所以利用value.target._value获取到要切换的值
      linkageType.value = value.target._value;
      })
      .catch(() => {
        return;
      });
  } else {
   linkageType.value = value.target._value;
  }
};

本以为大功告成 结果功能实现了但是el-radio选中的样式丢了,也就是说:value="linkageType"值没有绑定成功
查阅element-plus文档才发现element-plus el-raido现在使用:model-value来绑定值...天坑啊.. 看好文档太重要了...
文档传送门👉🏻https://element-plus.org/zh-CN/component/radio.html#radio-events
再次调整最终实现切换el-radio前二次确认功能👏🏻

<el-radio-group @input="changeLinkType" :model-value="linkageType" >

     <el-radio label="app">app</el-radio>

     <el-radio label="dept">dept</el-radio>

</el-radio-group>

完结撒花🎉..