当前位置：首页 > article >正文

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

article 2025/2/23 7:19:09

关键代码

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();

效果图