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

🧠 可扩展思路

  1. 多个按钮场景

    ts 复制代码
    h('button', { onClick: handleReject }, '拒绝')
    h('button', { onClick: handleAccept }, '接受')
  2. 替换为组件

    使用 defineComponent 包一层小组件传给 message

  3. 支持通知唯一性

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

  4. 封装为 composable

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

🧪 实际应用场景

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

🔚 小结

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

相关推荐
鱼樱前端28 分钟前
uni-app快速入门章法(二)
前端·uni-app
silent_missile42 分钟前
vue3父组件和子组件之间传递数据
前端·javascript·vue.js
克里斯蒂亚诺更新2 小时前
微信小程序app.js中每30秒调用一次wx.getLocation
javascript·微信小程序·小程序
IT_陈寒2 小时前
Vue 3.4 实战:这7个Composition API技巧让我的开发效率飙升50%
前端·人工智能·后端
鄃鳕2 小时前
C++坑系列,C++ std::atomic 拷贝构造函数问题分析与解决方案
java·javascript·c++
JIngJaneIL3 小时前
图书馆自习室|基于SSM的图书馆自习室座位预约小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·图书馆自习室
少年阿闯~~3 小时前
HTML——1px问题
前端·html
Never_Satisfied3 小时前
在JavaScript / HTML中,实现`<iframe>` 自适应高度
开发语言·javascript·html
Mike_jia3 小时前
SafeLine:自托管WAF颠覆者!一键部署守护Web安全的雷池防线
前端
brzhang3 小时前
把网页的“好句子”都装进侧边栏:我做了个叫 Markbox 的收藏器,开源!
前端·后端·架构