useNetwork

类别

Sensors

导出大小

909 B

最近修改

2 days ago

响应式网络状态。网络信息 API 提供关于系统连接的一般类型（例如，“wifi”、“移动网络”等）的信息。可以根据用户的连接情况选择高质量内容或低质量内容。整个 API 包括 NetworkInformation 接口的新增部分，以及在 Navigator 接口中新增的一个属性：Navigator.connection。

🌐 Reactive Network status. The Network Information API provides information about the system's connection in terms of general connection type (e.g., 'wifi', 'cellular', etc.). This can be used to select high definition content or low definition content based on the user's connection. The entire API consists of the addition of the NetworkInformation interface and a single property to the Navigator interface: Navigator.connection.

示例

源代码在线运行

isSupported: false
isOnline: true
saveData: false
type: unknown

用法

🌐 Usage

import { useNetwork } from '@vueuse/core'

const { isOnline, offlineAt, downlink, downlinkMax, effectiveType, saveData, type } = useNetwork()

console.log(isOnline.value)

要作为对象使用，请用 reactive() 封装它

🌐 To use as an object, wrap it with reactive()

import { reactive } from 'vue'

const network = reactive(useNetwork())

console.log(network.isOnline)

组件用法

🌐 Component Usage

<template>
  <UseNetwork v-slot="{ isOnline, type }">
    Is Online: {{ isOnline }}
    Type: {{ type }}
  </UseNetwork>
</template>