el-message自定义HTML包含按钮点击事件

关键代码

ElMessage({ dangerouslyUseHTMLString: true, message: `<span>请先维护供暖季信息</span>&nbsp;&nbsp;&nbsp;<el-button @click=`${{go}}` type="success" size="small" id="message-button">立即设置</el-button>`, type: "error", duration: 8000, });

一开始发现@click事件不生效，然后采取了操作dom添加点击事件监听发现点击事件生效 完整代码

const router = useRouter(); const gotoGlobalSet = () => { router.replace("/basic-modeling-cloud?model=global-settin"); }; const getIsAuth = () => { appAxios .get(`/cloud/basic/modeling/segment/orgId/{orgId}/isConf`) .then((res) => { if (res.data.errorcode === 0) { if (res.data.data == false) { ElMessage({ dangerouslyUseHTMLString: true, message: `<span>请先维护供暖季信息</span>&nbsp;&nbsp;&nbsp;<el-button style="color:rgb(133.4, 206.2, 97.4)" size="small" id="message-button">立即设置</el-button>`, type: "error", duration: 8000, }); // 在下一个 DOM 更新周期后，绑定按钮的点击事件 nextTick(() => { const button = document.getElementById("message-button"); if (button) { button.addEventListener("click", gotoGlobalSet); } }); } } }); }; getIsAuth();

效果图