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

关键代码

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

复制代码

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

1. const router = useRouter();
2. const gotoGlobalSet = () => {
3.   router.replace("/basic-modeling-cloud?model=global-settin");
4. };
5. const getIsAuth = () => {
6.   appAxios
7.     .get(`/cloud/basic/modeling/segment/orgId/{orgId}/isConf`)
8.     .then((res) => {
9.       if (res.data.errorcode === 0) {
10.         if (res.data.data == false) {
11.           ElMessage({
12.             dangerouslyUseHTMLString: true,
13.             message: `<span>请先维护供暖季信息</span>&nbsp;&nbsp;&nbsp;<el-button style="color:rgb(133.4, 206.2, 97.4)" size="small" id="message-button">立即设置</el-button>`,
14.             type: "error",
15.             duration: 8000,
16.           });
17.           // 在下一个 DOM 更新周期后，绑定按钮的点击事件
18.           nextTick(() => {
19.             const button = document.getElementById("message-button");
20.             if (button) {
21.               button.addEventListener("click", gotoGlobalSet);
22.             }
23.           });
24.         }
25.       }
26.     });
27. };
28. getIsAuth();

复制代码

结果图

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。