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>

🔍 核心逻辑说明

🧠 可扩展思路

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，我们还能轻松实现批量通知管理、动态事件绑定，极大提升了用户体验与可维护性。