Vue3 中使用 Element Plus 实现自定义按钮的 ElNotification 提示框
在 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 | 点击按钮时关闭对应通知框 |
🧠 可扩展思路
-
多个按钮场景
h('button', { onClick: handleReject }, '拒绝') h('button', { onClick: handleAccept }, '接受') -
替换为组件
使用defineComponent包一层小组件传给message -
支持通知唯一性
通知已存在就不再重复弹出，避免重复提醒 -
封装为 composable
const useNotification = () => {const notifyMap = ref({})const show = (opts: { message: string; onClick: Fn }) => { ... }return { show } }
🧪 实际应用场景
- 后台审批通知：“你有一条待处理任务”
- 导出提示：“导出任务正在生成，点击查看”
- 会话提醒：“对话超时，点击继续会话”
🔚 小结
Element Plus 的 ElNotification 虽然是用于展示型通知，但通过 h() 渲染函数可以实现非常灵活的交互内容。借助 Vue3 的组合式 API，我们还能轻松实现批量通知管理、动态事件绑定，极大提升了用户体验与可维护性。