useBattery

类别

导出体积

815 B

上次更改

last week

响应式的电池状态 API，更常被称为电池 API，提供有关系统电池充电级别的信息，并允许在电池级别或充电状态发生变化时发送事件通知。这可以用来调整你的应用程序的资源使用，以减少电池耗尽时的电池消耗，或在电池耗尽之前保存更改，以防止数据丢失。

示例

源码 playground (beta)

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

用法

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>

类型声明

显示类型声明

/**
 * Many of the jsdoc definitions here are modified version of the
 * documentation from MDN(https://developer.mozilla.org/en-US/docs/Web/API/BatteryManager/charging)
 */
export interface UseBatteryOptions extends ConfigurableNavigator {}
export interface UseBatteryReturn extends Supportable {
  /**
   * A Boolean value indicating whether the battery is currently being charged.
   *
   * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/BatteryManager/charging)
   */
  charging
: Readonly
<ShallowRef
<boolean>>
  /**
   * A number representing the remaining time in seconds until the battery is fully charged, or 0 if the battery is already fully charged.
   *
   * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/BatteryManager/chargingTime)
   */
  chargingTime
: Readonly
<ShallowRef
<number>>
  /**
   * A number representing the remaining time in seconds until the battery is completely discharged and the system suspends.
   *
   * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/BatteryManager/dischargingTime)
   */
  dischargingTime
: Readonly
<ShallowRef
<number>>
  /**
   * A number representing the system's battery charge level scaled to a value between 0.0 and 1.0.
   *
   * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/BatteryManager/level)
   */
  level
: Readonly
<ShallowRef
<number>>
}
export interface BatteryManager extends EventTarget {
  readonly charging
: boolean
  readonly chargingTime
: number
  readonly dischargingTime
: number
  readonly level
: number
}
/**
 * 响应式电池状态
 *
 * @see https://vueuse.org/useBattery
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function useBattery
(
  options
?: UseBatteryOptions,
): UseBatteryReturn