效果

在这里插入图片描述

通知内容

  • 先把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()
Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐