element+vue的notify组件,同一个通知在全局多次出现问题

2019-10-19 admin

实现全局通知组件,多个标签页只出现一个通知组件的思路:1.localstorage中存贮一个变量,每次通知前去拿这个变量,和当前要实例化的通知的数据进行对比,如果id一致说明某一标签页中已经存在改通知,则不需要再次实例化通知组件,如果不存在,则实例化通知组件,这样就保证了多个标签页中不存在相同的通知,每个通知都只通知一次。 相关代码如下:


methods: {
showNotify(message) {
  if (message.duration !== 0 && !message.isSelfSend) {
    // 当前发送消息的用户正在咨询中,不再转诊中,则此消息只推送给健康管理师
    const messageSessionInd = _.findIndex(this.hmsAllSession, function(o) { return o.last_ask.family_member === message.mymessage.family_member; });
    if (messageSessionInd !== -1) {
      if ((!this.hmsAllSession[messageSessionInd].last_ask.has_transfer && this.bus_role === 'hm') ||
       (this.hmsAllSession[messageSessionInd].last_ask.has_transfer && this.bus_role === this.hmsAllSession[messageSessionInd].last_ask.transfer_role)) {
        this.$notify.info({
          title: '新消息提示',
          message: message.msgOptions.type === 'text' ? message.msgOptions.text : message.msgTextPrefix,
          duration: message.duration
        });
        this.msgAudio = new Audio();
        this.msgAudio.src = 'https://pic1.baobaohehu.com/static/mp-ask/new-msg.mp3';
        this.msgAudio.play();
        return
      }
    }
  }
  if (message.duration !== 0) {
    return
  }
  // 只有健康管理师角色才更新转诊按钮的状态,才拉取当前的currentSession && this.bus_role === 'hm'
  // console.log(this.$route.path)
  const routePath = this.$route.path
  if (routePath.indexOf('diagnose') !== -1) {
    if (this.currentSession && message.message_body.fd_session === this.currentSession.session_id) {
      this.$store.dispatch('chat/getCustomerTree', '', { root: true }) // 刷线当前列表的用户状态
    }
  }
  const h = this.$createElement;
  let tip = '您的转诊请求已经被' + message.message_body.user.name + '拒绝,如有必要,请与' + message.message_body.user.name + '沟通后再次发起转诊请求'
  if (message.message_body.event_type === 'transfer_apply') {
    tip = message.message_body.user.name + '发起转诊请求' + '请及时处理,5分钟内未响应,系统将自动同意'
    const notifyApplyMsgId = window.localStorage.getItem('notifyApplyMsgId')
    if (!notifyApplyMsgId || notifyApplyMsgId !== message.message_body.message_id) {
      window.localStorage.setItem('notifyApplyMsgId', message.message_body.message_id)
      Notification({
        iconClass: 'el-icon-bell my-bell',
        title: '转诊申请',
        dangerouslyUseHTMLString: true,
        duration: 0,
        message: h('div', { class: 'clearfix' }, [
          h('p', {
            class: 'title'
          }, tip),
          h('button', {
            class: 'detail_btn',
            attrs: { fd_ask: message.message_body.fd_ask,
              message_id: message.message_body.message_id,
              fd_session: message.message_body.fd_session,
              family_member: message.message_body.family_member },
            on: {
              click: this.showMsg.bind(this)
            }
          }, '查看详情')
        ]),
        onClose: function(val) {
          console.log('关闭notify的回调')
          console.log(val)
          console.log(val.id)
        }
      })
    }
  } else if (message.message_body.event_type === 'transfer_accept') {
    tip = '您的转诊请求已经被' + message.message_body.user.name + '同意,请与用户确认后请单击【发起转诊】按钮'
    Notification.success({
      title: '转诊请求被同意',
      dangerouslyUseHTMLString: true,
      duration: 0,
      message: h('div', { class: 'clearfix' }, [
        h('p', {
          class: 'title'
        }, tip),
        h('button', {
          class: 'detail_btn',
          attrs: { fd_ask: message.message_body.fd_ask,
            message_id: message.message_body.message_id,
            fd_session: message.message_body.fd_session,
            family_member: message.message_body.family_member },
          on: {
            click: this.showMsg.bind(this)
          }
        }, '查看详情')
      ]),
      onClose: function(val) {
        console.log('关闭notify的回调')
        console.log(val)
      }
    })
  } else if (message.message_body.event_type === 'transfer_reject') {
    Notification.error({
      title: '转诊请求被拒绝',
      dangerouslyUseHTMLString: true,
      duration: 0,
      message: h('div', { class: 'clearfix' }, [
        h('p', {
          class: 'title'
        }, tip),
        h('button', {
          class: 'detail_btn',
          attrs: { fd_ask: message.message_body.fd_ask,
            message_id: message.message_body.message_id,
            fd_session: message.message_body.fd_session,
            family_member: message.message_body.family_member },
          on: {
            click: this.showMsg.bind(this)
          }
        }, '查看详情')
      ]),
      onClose: function(val) {
        console.log('关闭notify的回调')
        console.log(val)
      }
    })
  }
},
showMsg(fdaskid) {
  const routePath = this.$route.path
  if (routePath.indexOf('diagnose') === -1) {
    this.$router.push({
      path: '/medical-service/diagnose'
    })
  }
  const target = fdaskid.target
  const message_id = target.getAttribute('message_id')
  const fd_session = target.getAttribute('fd_session')
  const family_member = target.getAttribute('family_member')
  // 跳转到当前消息的位置 message_id
  if (this.currentSession && this.currentSession.session_id && this.currentSession.session_id === fd_session && this.activedBaby && family_member === this.activedBaby._id) {
    this.goMessageDetail(message_id)
  } else {
    // 当前对话用户不是系统通知的用户-宝宝的对话
    setTimeout(res => {
      let currentSessionObj = ''
      if (fd_session) {
        currentSessionObj = _.find(this.hmsAllSession, function(o) {
          return o.session_id === fd_session
        })
      }
      if (currentSessionObj) {
        this.$store.dispatch('chat/setCurrentSession', currentSessionObj, { root: true })
      }
      // 当前显示宝宝的规则为:系统通知对话的宝宝、咨询中的宝宝、第一个宝宝
      const baby = _.find(this.currentBabyList, function(o) {
        return o._id === family_member
      })
      if (baby) {
        this.$store.dispatch('chat/setActivedBaby', baby, { root: true })
      }
      this.goMessageDetail(message_id)
    }, 300)
  }
},
goMessageDetail(message_id) {
  let existMesssage = {}
  // eslint-disable-next-line no-unused-vars
  const currentMegList = this.getCurrentIMInfoMessages
  if (currentMegList) {
    existMesssage = _.find(currentMegList, function(o) {
      return o._id === message_id
    })
  }
  if (existMesssage) {
    // 定位到当前锚点消息
    this.goAnchor(message_id)
  } else {
    this.$store.dispatch('chat/messageLocation', message_id, { root: true })
    setTimeout(() => {
      this.goAnchor(message_id)
    }, 700)
  }
},
goAnchor(selector) {
  var parentbox = document.getElementById('chatBox')
  var anchor = document.getElementById(selector) // 参数为要跳转到的元素id
  if (anchor && anchor.offsetTop) {
    parentbox.scrollTop = anchor.offsetTop - 150 // chrome
  }
}

}`

[转载]原文链接:https://segmentfault.com/a/1190000020740285

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77799.html

文章标题:element+vue的notify组件,同一个通知在全局多次出现问题

相关文章
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
回到顶部