场景：点击切换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>
完结撒花🎉..
