使用element的Notification做消息推送 样式重叠

一、解决element-ui，同时调用notification时，通知重叠的问题

data(){
    return {
     notificationPromise:Promise.resolve()，
        
    }
},
methods:{
    notify(msg) {
        this.notificationPromise = this.notificationPromise.then(this.$nextTick).then(()=>{
          this.$notify({
            title: "消息",
            message: msg,
            dangerouslyUseHTMLString: true,
            duration: 0
          })
        })
      }
}
<script>

二、自定义notification的显示样式，点击事件

   notify(msg) {
      const h = this.$createElement
      this.notifyPromise = this.notifyPromise.then(this.$nextTick).then(() => {
        let notify = this.$notify({
          title: "",
          // message: msg.F_Content,
          message: h('p', [
            h('p', null, '你有一个新的待办' + msg.F_Title),
            h('i', {
              class: 'el-icon-close footerClose',
              on: {
                click: () => {
                  this.closeNotify(msg); //关闭事件
                },
              },
            }, ''),
            h('p', {
              style: 'text-align: right;width:195px;dispaly:block;margin-top: 8px;color:#43c39d;cursor: pointer;',
              on: {
                click: () => {
                  this.clickNotify(msg);//点击事件详情
                },
              },
            }, '点击查看详情'),
          ]),
          position: 'bottom-right',
          dangerouslyUseHTMLString: true,
          duration: 0,
          showClose: false,
          // onClick: this.clickNotify(msg)

        });
        this.notifications[msg.F_Id] = notify; //存储消息列表的数据，调用本身的close事件实现关闭
        //记录还有几个弹窗没有关闭（方便任何一个页面关闭）
        this.$store.commit('CLOSE_NOTICE', this.notifications)
      })

    },

1.关闭单个消息通知

代码如下（示例）：

  closeNotification(msg) {
      this.notifications[msg.F_Id].close();
      delete this.notifications[msg.F_Id];
    },

2.关闭所有消息通知

代码如下（示例）：

  closeAllNotification() {
      let _this = this;
      for (let key in _this.notifications) {
        _this.notifications[key].close()
        delete _this.notifications[key];
      }
    },

---

总结

提示：这里对文章进行总结：
例如：以上就是分享element 的notifications通知组件自定义事件 样式