useBattery

分类

导出大小

799 B

最后更改

3 周前

响应式电池状态 API，更常被称为 Battery API，提供关于系统电池充电水平的信息，并允许您在电池电量或充电状态改变时接收事件通知。这可以用于调整您的应用程序的资源使用，以在电池电量低时减少电池消耗，或在电池耗尽之前保存更改，以防止数据丢失。

演示

源码

isSupported: false
charging: false
chargingTime: 0
dischargingTime: 0
level: 1

用法

import { useBattery } from '@vueuse/core'

const { charging, chargingTime, dischargingTime, level } = useBattery()

状态	类型	描述
charging	`Boolean`	设备当前是否正在充电。
chargingTime	`Number`	设备充满电之前的秒数。
dischargingTime	`Number`	设备完全放电之前的秒数。
level	`Number`	介于 0 和 1 之间的数字，表示当前电量水平。

用例

我们的应用程序通常不关心电池电量，我们可以对应用程序进行一些调整，使其对低电量用户更加友好。

触发特殊的“暗黑模式”省电主题设置。
停止在新闻推送中自动播放视频。
禁用一些非关键的后台工作进程。
限制网络调用并减少 CPU/内存消耗。

组件用法

此函数还通过 @vueuse/components 包提供了一个无渲染组件版本。了解更多关于用法的信息。

vue

<template>
  <UseBattery v-slot="{ charging }">
    Is Charging: {{ charging }}
  </UseBattery>
</template>

类型声明

typescript

export interface BatteryManager extends EventTarget {
  charging: boolean
  chargingTime: number
  dischargingTime: number
  level: number
}
/**
 * Reactive Battery Status API.
 *
 * @see https://vueuse.org.cn/useBattery
 */
export declare function useBattery(options?: ConfigurableNavigator): {
  isSupported: ComputedRef<boolean>
  charging: ShallowRef<boolean, boolean>
  chargingTime: ShallowRef<number, number>
  dischargingTime: ShallowRef<number, number>
  level: ShallowRef<number, number>
}
export type UseBatteryReturn = ReturnType<typeof useBattery>