Vue3 中使用 Element Plus 实现自定义按钮的 ElNotification 提示框

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

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

✨ 目标效果

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

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

📦 技术栈

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

✅ 实现方案

1. 基础代码结构

ts 复制代码

<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`	点击按钮时关闭对应通知框

🧠 可扩展思路

多个按钮场景

ts 复制代码

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

替换为组件

使用 defineComponent 包一层小组件传给 message
支持通知唯一性

通知已存在就不再重复弹出，避免重复提醒

封装为 composable

ts 复制代码

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

🧪 实际应用场景

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

🔚 小结

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