Vue - 사용자가 오프라인 상태인지 확인하고 온라인 상태가 되면 div를 표시합니다.

Vue - 사용자가 오프라인 상태인지 확인하고 온라인 상태가 되면 div를 표시합니다.

현재 사용자가 오프라인으로 전환되는지 확인하기 위해 시간 지정 루프 기능을 사용하고 있습니다.

created() {
   setInterval(() => {
        this.checkOnline();
   }, 30000);
}

방법:

checkOnline(){
   this.onLine = navigator.onLine ? true : false;
}

타이머를 사용하지 않고 이것을 검출할 수 있는 방법이 있습니까?

두 번째로...

사용자에게 다시 온라인 상태가 되었음을 알리기 위해 1초 동안 경보를 표시하려고 합니다.this.onLine이 참일 경우 div는 숨겨야 합니다.false일 때도 숨겨야 하는데 false에서 true로 바뀌면 div를 1초 정도 보여주고 다시 숨깁니다.나는 이것을 셋타임아웃과 감시자를 사용하여 시도했지만, 어느 쪽도 원하는 효과를 거두지 못했다.

편집:

이를 실현하기 위한 한 가지 방법은 다음과 같습니다.

 data() {
     return {
         onLine: navigator.onLine ? true : false,
     }
 }

그 후 온라인 메시지를 다시 표시하는 감시자

watch: {
    onLine: function (val) {
        if(this.onLine === true){
            this.showBackOnline = true;
            setTimeout(()=>{ this.showBackOnline = false; }, 1000);
        }
    },
},

이를 위해 전용 알림 플러그인을 사용하는 것 외에 워처보다 더 좋은 방법이 있습니까?

타이머를 사용하지 않고 이것을 검출할 수 있는 방법이 있습니까?네. 온라인 오프라인 이벤트를 통해서요.

이를 위해 전용 알림 플러그인을 사용하는 것 외에 워처보다 더 좋은 방법이 있습니까?여기에서는 워처가 가장 적합한 방법이라고 생각합니다.

데모: https://jsfiddle.net/jacobgoh101/xz6e3705/4/

new Vue({
    el: "#app",
    data: {
        onLine: navigator.onLine,
        showBackOnline: false
    },
    methods: {
        updateOnlineStatus(e) {
            const {
                type
            } = e;
            this.onLine = type === 'online';
        }
    },
    watch: {
        onLine(v) {
            if (v) {
                this.showBackOnline = true;
                setTimeout(() => {
                    this.showBackOnline = false;
                }, 1000);
            }
        }
    },
    mounted() {
        window.addEventListener('online', this.updateOnlineStatus);
        window.addEventListener('offline', this.updateOnlineStatus);
    },
    beforeDestroy() {
        window.removeEventListener('online', this.updateOnlineStatus);
        window.removeEventListener('offline', this.updateOnlineStatus);
    }
})

이벤트 리스너에서 화살표 기능을 설정하고 리스너별로 true/false를 설정하기만 하면(onLine 상태 업데이트) 이 작업을 처리할 수 있습니다.

  data() {
    return {
      isOnLine:navigator.onLine
    }
  },
  mounted() {
     window.addEventListener('online', ()=>{this.isOnLine=true});
     window.addEventListener('offline', ()=>{this.isOnLine=false});
  },

언급URL : https://stackoverflow.com/questions/51689739/vue-check-if-user-is-offline-and-then-show-div-for-a-second-once-they-come-bac