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

新公司项目有个消息提示的需要,老系统是基于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)
  }
}

你可能感兴趣的:(前端,vue,菜鸟,开发)