useBattery
响应式的 电池状态 API，更常被称为电池 API，提供有关系统电池充电级别的信息，并允许在电池级别或充电状态发生变化时发送事件通知。这可以用来调整你的应用程序的资源使用，以减少电池耗尽时的电池消耗，或在电池耗尽之前保存更改，以防止数据丢失。
示例
isSupported: false
charging: false
chargingTime: 0
dischargingTime: 0
level: 1
用法
ts
import { useBattery } from '@vueuse/core'
const { isSupported, charging, chargingTime, dischargingTime, level } = useBattery()| 状态 | 类型 | 描述 |
|---|---|---|
| isSupported | Boolean | 当前浏览器是否支持电池状态 API。 |
| charging | Boolean | 设备当前是否正在充电。 |
| chargingTime | Number | 直到设备完全充满的秒数。 |
| dischargingTime | Number | 直到设备完全放电的秒数。 |
| level | Number | 介于 0 和 1 之间的数字，表示当前的充电水平。 |
浏览器支持
电池状态 API 的浏览器支持有限。目前仅在基于 Chromium 的浏览器中可用。使用数值前，请务必检查 isSupported。
使用场景
我们的应用程序通常不会关注电池电量，但我们可以对应用程序进行一些调整，使其对电量较低的用户更友好。
- 触发特殊的 “省电模式” 暗色主题设置。
- 停止自动播放新闻动态中的视频。
- 禁用一些不是必要的后台任务。
- 限制网络调用并减少 CPU/内存消耗。
组件用法
vue
<template>
<UseBattery v-slot="{ isSupported, charging, level }">
<div v-if="isSupported">
<p>是否正在充电: {{ charging }}</p>
<p>电池电量: {{ (level * 100).toFixed(0) }}%</p>
</div>
<div v-else>
不支持电池 API
</div>
</UseBattery>
</template>类型声明
ts
export interface UseBatteryOptions extends ConfigurableNavigator {}
export interface UseBatteryReturn extends Supportable {
charging: ShallowRef<boolean>
chargingTime: ShallowRef<number>
dischargingTime: ShallowRef<number>
level: ShallowRef<number>
}
export interface BatteryManager extends EventTarget {
charging: boolean
chargingTime: number
dischargingTime: number
level: number
}
/**
* 响应式电池状态
*
* @see https://vueuse.org/useBattery
*
* @__NO_SIDE_EFFECTS__
*/
export declare function useBattery(
options?: UseBatteryOptions,
): UseBatteryReturn源码
贡献者
一纸忘忧