element UI中Notification 通知防重叠以及关闭通知问题

àì夳堔傛蜴生んèń 2023-01-21 05:24 716阅读 0赞

//好的 不再提示
        neirong1(i){
              const h = this.$createElement;  //vue 中的渲染函数  createElement 参数
              var that = this;
              that.notifyPromise = that.notifyPromise.then(that.$nextTick).then(function () {  //防止通知叠加
              let notify =that.$notify({   
              title: that.msgNotify[i].title,
              customClass:'sss',    //给最外层div加class
              message: h('p', null, [          //消息中除了标题所有的dom写在[]中
                h('div', null, that.msgNotify[i].digest),
                  h('el-button', {
                    style: {
                      margin:'15px 5px 10px 100px',
                    },
                    attrs: {
                      size: 'mini',
                      type: 'primary'
                    },
                    on: {
                    click:function(){
                      console.log(that.msgNotify[i].id)
                      request({
                        url: '/sp/message/spBG/isRead',
                        method: 'get',
                        params:{id:that.msgNotify[i].id}
                      }).then(res => {
                        that.msgNotifyList[that.msgNotify[i].id].close() //关闭通知
                        if(that.msgNotify[i].isRead==0){
                          that.$store.state.user.num1--  
                        }
                      })
                      }
                    }
                  }, '好的'),
                  h('el-button', {
                    style: {
                      margin:'10px 5px',
                    //  float: 'right'
                    },
                    attrs: {
                      size: 'mini',
                      type: 'primary'
                    },
                    on: {
                    click:function(){
                      console.log(that.msgNotify[i].id)
                      request({
                        url: '/sp/message/spBG/isPopout',
                        method: 'get',
                        params:{id:that.msgNotify[i].id}
                      }).then(res => {
                        that.msgNotifyList[that.msgNotify[i].id].close()  //找到该id对应的某个notify关闭
                      })
                      }
                    }
                  }, '不再提示')
            ]),
            position: 'top-right',  //通知在页面的显示位置
            duration: 0, 
            offset: 20,
            dangerouslyUseHTMLString: true
            })
            that.msgNotifyList[that.msgNotify[i].id]=notify    //把每个通知都放进msgNotifyList中，例如{id：某个notify}
          })
        },

![防止通知重叠进行的异步操作][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70]: /images/20221020/fa25205448f44f5bbc5ec10261226697.png