在 Vue3 项目中，我们经常会用到 ElNotification 作为消息提醒组件，尤其是在异步操作、任务完成或用户需要交互确认时。然而，Element Plus 默认的 Notification 是非交互式的，不能直接嵌入按钮或事件。

今天我们来实现一个带自定义按钮和点击事件的 Notification 提示框，并且支持手动关闭。

✨ 目标效果

我们希望实现这样的功能：

• 弹出一个固定的通知框（duration: false）
• 内容中嵌入自定义按钮
• 点击按钮后执行事件回调，并关闭该通知框

📦 技术栈

• Vue 3 Composition API
• Element Plus
• 渲染自定义内容：h() 渲染函数
• 引用通知对象：ref + id 进行映射管理

---

✅ 实现方案

1. 基础代码结构

<script setup lang="ts">
import { ElNotification } from 'element-plus'
import { ref, h } from 'vue'// 存储所有通知实例
const notify = ref<Record<string, any>>({})// 触发通知
const fc = () => {const id = Math.random().toString()const closeNotification = () => {notify.value[id]?.close()delete notify.value[id]}notify.value[id] = ElNotification({type: 'warning',title: '提醒',duration: 0,dangerouslyUseHTMLString: true,message: h('div', [h('p', {}, '消息内容'),h('p',{style: 'width: 250px; display: flex; justify-content: space-between;',},[h('a',{style: 'color: #409EFF; cursor: pointer;',onClick: closeNotification,},'确定'),]),]),})
}
</script>

---

🔍 核心逻辑说明

关键点	说明
notify.value	存储所有当前激活的通知框引用，方便后续关闭
Math.random().toString()	用作唯一 key 区分多个通知（可换成 UUID）
h()	Vue 的渲染函数，用于嵌入 HTML/组件内容
dangerouslyUseHTMLString: true	与 h() 冲突，写错会无效；这里只是保留展示形式建议使用 h() 就不加它
duration: 0	通知不会自动关闭，用户需点击按钮关闭
onClick: closeNotification	点击按钮时关闭对应通知框

---

🧠 可扩展思路

1. 多个按钮场景

   h('button', { onClick: handleReject }, '拒绝')
   h('button', { onClick: handleAccept }, '接受')
   

2. 替换为组件
   使用 defineComponent 包一层小组件传给 message

3. 支持通知唯一性
   通知已存在就不再重复弹出，避免重复提醒

4. 封装为 composable

   const useNotification = () => {const notifyMap = ref({})const show = (opts: { message: string; onClick: Fn }) => { ... }return { show }
   }
   

---

🧪 实际应用场景

• 后台审批通知：“你有一条待处理任务”
• 导出提示：“导出任务正在生成，点击查看”
• 会话提醒：“对话超时，点击继续会话”

---

🔚 小结

Element Plus 的 ElNotification 虽然是用于展示型通知，但通过 h() 渲染函数可以实现非常灵活的交互内容。借助 Vue3 的组合式 API，我们还能轻松实现批量通知管理、动态事件绑定，极大提升了用户体验与可维护性。