网络状态 Hooks：useOnline

useOnline 维护 isOnline 响应式网络标记（navigator.onLine 初始值 + window online / offline 事件），作用域销毁自动解绑。离线提示、断网守卫（提交前校验）、重连自动刷新的统一信号源。

基本用法

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { useOnline } from 'vue3-ep-biz-lib'

const { isOnline } = useOnline({
  onChange: (online) => {
    if (online) ElMessage.success('网络已恢复')
    else ElMessage.warning('网络已断开，请检查网络连接')
  },
})
</script>

<template>
  <el-alert v-if="!isOnline" type="warning" :closable="false" title="当前处于离线状态，操作将在恢复后同步" />
  <el-button :disabled="!isOnline">提交订单</el-button>
</template>

重连自动刷新

const { isOnline } = useOnline({
  onChange: (online) => {
    if (online) reload() // 断网恢复后拉取最新数据
  },
})

API

useOnline(options): UseOnlineReturn

成员	类型	说明
isOnline	Ref<boolean>	当前是否在线

options

属性	类型	默认值	说明
onChange	(online: boolean) => void	—	网络状态变化回调（重复同值不触发）

TIP

navigator.onLine 只反映网卡 / 连接状态，不保证可达业务服务；关键请求失败建议结合接口错误码兜底。长连接场景用 useWebSocket（自带断线重连）。