@neosjs/cli/lib/create/template/base/src/hooks/useOnline.ts

Neos(奈欧斯)是一个帮助开发者快速地创建 Vue3 应用并自动配置项目编译的脚手架

import { ref, onMounted, onUnmounted } from 'vue'

export const useOnline = () => {
  const online = ref(true)
  const showStatus = (val:any) => {
    online.value = typeof val == 'boolean' ? val : val.target.online
  }
  // 在页面加载后，设置正确的网络状态
  navigator.onLine ? showStatus(true) : showStatus(false)
  onMounted(() => {
    // 开始监听网络状态的变化
    window.addEventListener('online', showStatus)
    window.addEventListener('offline', showStatus)
  })
  onUnmounted(() => {
    // 移除监听网络状态的变化
    window.removeEventListener('online', showStatus)
    window.removeEventListener('offline', showStatus)
  })
  return { online }
}