基于element-ui Notification 组件的消息提示

最新推荐文章于 2025-07-09 13:33:53 发布

原创最新推荐文章于 2025-07-09 13:33:53 发布 · 1w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #消息提示 #vue #element #Notification

前端同时被 3 个专栏收录

24 篇文章

订阅专栏

开发

12 篇文章

订阅专栏

vue

7 篇文章

订阅专栏

在新项目中，由于浏览器协议限制，作者放弃了window的Notification属性，转而采用Element UI的Notification组件来实现消息提示功能。经过尝试和探索，最终成功地完成了这一需求，尽管实现较为简单，作者期待得到专业人士的建议和改进意见。

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

新公司项目有个消息提示的需要，老系统是基于window的 Notification属性做的，具体做法

let data = datas || [] //封装的方法，传递的数据
if(window.Notification){
  for(let i=0; i< data.length; i++)
  {
    let popNotice = function() {
      if (Notification.permission == "granted") {
        let notification = new Notification("Hi，您有新消息：", {
          body: data[i].popup_message,
          icon: '',
        });
        //onshow函数在消息框显示时会被调用
        notification.onshow = function() {

        };

        //消息框被点击时被调用
        notification.onclick = function() {
          window.location.href = 'message-remind/list';
          notification.close();
        };

        //一个消息框关闭时onclose函数会被调用
        notification.onclose = function() {

        };
      }
    };

    if(Notification.permission == "granted"){
      popNotice();
    }else if(Notification.permission != "granted"){
      Notification.requestPermission().then(function(permission) {
        popNotice();
      });
    }
  }
}

但是这个属性对浏览器协议要求太高，需要https，所以决定跟换提示方式，新项目中使用element 中的Notification 组件实现，最后完成了这个需求，完成的很粗糙，试了好几种想法，最后选择这种，希望有大佬给出指正

/*自定义消息提示*/
showMessage(Utils) {
  if(this.setIntervals) {//下次调取前，清除以前的定时器
    clearInterval(this.setIntervals)
    this.index = 0;
  }
  if(this.showMessArr.length) {
    this.setIntervals = setInterval(() => {
      this.$notify.info({
        title: '消息',
        message: this.showMessArr[this.index]['popup_message'] || this.index,
        position: 'bottom-right',
        offset: 60,
        duration: 2900,
        onClick: () => {
          window.open(Utils.serverConfig.serverPath + '/message-remind/list')
        },
        onClose: () => {
          let index = this.index;
          let id = this.showMessArr[index]['popup_id'] || '';
          /*如果超过最大长度就清除定时器*/
          this.index ++;
          if(this.index > this.showMessArr.length - 1) {
            clearInterval(this.setIntervals)
          }
        }
      });
    } ,3000)
  }
}