vue2 elememtUI 中Notification的自定义

遇到了一个需要使用Notification, 但是Notification 内需要自定义按钮,执行各自的方法

看了elementUI的文档,Element - The world's most popular Vue UI frameworkElement,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/notification支持html和VNode

dangerouslyUseHTMLString属性设置为 true,message 就会被当作 HTML 片段处理。设置html如下

this.$notify({
     title: '提示',
     dangerouslyUseHTMLString: true,
     position: 'top-left',
     message: `我是html测试</br> <span style="color:#F4494A">带颜色的span</span>`,
     duration: 0, // 设置0不会自动关闭
     offset: 50
})

而使用VNode,因为我内部需要用一个按钮关闭该Notification,而官方文档说

调用 Notification 或 this.$notify 会返回当前 Notification 的实例。如果需要手动关闭实例,可以调用它的 close 方法。

又是报错又是实现不了,几经波折最后搞出来了,代码如下

 

data() {
    return {
        arr: []
    }
},
methods: {
    setNotification(id) {
    const h = this.$createElement
    // 一定要写,不然报错h未定义,因为VNode是VUE的,而我们写的是JS
    var that = this
    const notification = this.$notify({
       title: '提示',
       dangerouslyUseHTMLString: true,
       position: 'bottom-right',
       message: h('p', null, [
          h('div', {
            class: 'margin-bottom-10'
          }, '提示语message'),
          h('div', {
            class: 'flex-end-center'
          }, [
            h('button', {
              on: {
                click: function() {
                  that.noDeal(id)
                }
              },
              class: 'el-button el-button--small'
            }, '暂不处理'),
            h('button', {
              on: {
                click: function() {
                  that.otherClick(id)
                }
              },
              class: 'el-button el-button--primary el-button--small'
            }, '其他点击')
          ])
        ]),
        duration: 0,
        offset: 50,
        customClass: 'reserve-notify',
        onClose: function() {
          that.deleteOneNotifications(id)
        }
      })
      this.arr.push({
        id: id,
        notification: notification // 将该vue对象存起来为了执行close方法
      })
    },
    otherClick(id) {
      this.noDeal(id) // 先关闭该弹框
      // 其他处理
    },
    noDeal(id) { // 点击不处理,关闭弹框,并且删除数组中对应的项
      const index = this.arr.findIndex(item => {
        return item.id=== id
      })
      if (index > -1) {
        this.arr[index].notification.close()
        this.arr.splice(index, 1)
      }
    },
    deleteOneNotifications(id) { 
      // 关闭该弹框会触发的方法,只要弹框关闭就会触发,我之前写错了,进入了死循环
      const index = this.arr.findIndex(item => {
        return item.id=== id
      })
      if (index > -1) {
        this.arr.splice(index, 1)
      }
    }
}

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值