useBattery

Demo

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/内存消耗。

Component Usage

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

vue

<template>
  <UseBattery v-slot="{ charging }">
    正在充电: {{ charging }}
  </UseBattery>
</template>

类型声明

typescript

export interface BatteryManager extends EventTarget {
  charging: boolean
  chargingTime: number
  dischargingTime: number
  level: number
}
/**
 * 响应式电池状态
 *
 * @see https://vueuse.org/useBattery
 */
export declare function useBattery(options?: ConfigurableNavigator): {
  isSupported: ComputedRef<boolean>
  charging: Ref<boolean, boolean>
  chargingTime: Ref<number, number>
  dischargingTime: Ref<number, number>
  level: Ref<number, number>
}
export type UseBatteryReturn = ReturnType<typeof useBattery>