element-ui this.$notify使用html作为内容包括事件禁止面板重叠关闭面板

最新推荐文章于 2025-06-04 10:32:19 发布

学生宫布

最新推荐文章于 2025-06-04 10:32:19 发布

阅读量1.2w

点赞数 5

CC 4.0 BY-SA版权

分类专栏：技术栈-语言-大前端文章标签：前端 element-ui notify 事件对象

本文链接：https://blog.youkuaiyun.com/cc007cc009/article/details/110622013

技术栈-语言-大前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在Vue中实现自定义的Notify通知面板，并通过示例代码详细讲解了其用法，包括如何避免面板重叠及如何关闭指定或所有通知。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

效果

在这里插入图片描述

通知内容

先把notify面板要显示的内容组织好语法很容易看懂

	const h = this.$createElement
	const hrender = h('p', null, [
          h('div', [
            h('div',title), // 传变量
            h('div',content),
            h('div',author),
            h('div',time),
            ], null),
          h('button', {
            class: '样式',
            // 点击事件
            // on:{
              // click:this.doSth(parameters) // 不能传参，否则会自动执行
            // }
          }, "做事情"),
          ])

通知主体根据官网写法

	this.$notify({
            title: '提示',
            dangerouslyUseHTMLString: true,
            message: hrender,
            type: 'warning',
            position: 'bottom-right',
            duration: 0,
            // showClose: false,
            onClick: () => {
              this.toApproval(approvalQuery)
            },
            onClose: () => {
              console.log(`Notify已关闭，说明异常或已查看`)
            }
          })

禁止面板重叠

批量生成notify面板会重叠在一起
定义

data() {
      return {
        notifyPromise: Promise.resolve(),
... ...

使用箭头函数

this.notifyPromise = this.notifyPromise.then(this.$nextTick).then(()=>{ // 禁止重叠
	this.$notify({
	... ...
})

关闭

关闭某个

const instance = this.$notify({
... ...
instance.close()

关闭全部

this.$notify.closeAll()