首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Vue js总是运行一个函数来查看用户是联机的还是离线的。

Vue js总是运行一个函数来查看用户是联机的还是离线的。
EN

Stack Overflow用户
提问于 2022-01-20 21:01:17
回答 1查看 267关注 0票数 0

你好,我想找到一个方法,看看用户在我的网页应用程序是在线的还是离线的,并始终运行!如果用户离线,请等待10秒,查看是否恢复联机,如果不运行函数!

谢谢大家的帮助!

EN

回答 1

Stack Overflow用户

发布于 2022-01-21 09:51:09

创建一个像这样的组件OfflineComponent.vue

代码语言:javascript
复制
<template>
  <div>Offline component after 5 seconds!</div>
</template>
代码语言:javascript
复制
<script>
export default {
  data() {
    return {
      showOnce: false,
    }
  },

  mounted() {
    this.startInterval()
  },

  methods: {
    startInterval() {
      window.setInterval(() => {
        if (this.$nuxt.isOffline && !this.showOnce) {
          this.runThisFunc()
          this.showOnce = true
        }

        if (this.showOnce) {
          clearInterval(window)
        }
      }, 5000)
    },

    runThisFunc() {
      console.log('OFFLINE!')
    },
  },
}
</script>

现在将它导入到您想要的页面中。我使用主页:

代码语言:javascript
复制
<template>
  <div v-if="$nuxt.isOffline">
    <offline-component></offline-component>
  </div>
  <div v-else>You are Online!</div>
</template>
代码语言:javascript
复制
<script>
import OfflineComponent from '~/components/offlineComponent.vue'

export default {
  name: 'IndexPage',
  components: {
    OfflineComponent,
  },
}
</script>
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/70793344

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档