监听网络状态,弹出网络异常提示语

data(){
  return{
    onLine: navigator.onLine,
  }
},
mounted(){
  window.addEventListener('online',this.updateOnlineStatus);
  window.addEventListener('offline',this.updateOnlineStatus);
},
methods:{
  updateOnlineStatus(e) {
    const { type } = e;
    this.onLine = type ==='online';
             if (!this.onLine) {
                this.$toast({
                  message: "当前网络异常",
                  position: "middle",
                  duration: 1500
                })
              }
  },
},
//在销毁时解除事件监听
beforeDestroy(){
  window.removeEventListener('online',this.updateOnlineStatus);
  window.removeEventListener('offline',this.updateOnlineStatus);
},   

  

posted @ 2021-07-26 18:30  chicidol  阅读(163)  评论(0编辑  收藏  举报