vueuse 中文文档

Vue 通过 VueUse 的 useBattery 来获取电池状态

Vue  通过 VueUse 的 useBattery 来获取电池状态,在电池水平或充电状态更改时发送的事件得到通知,做出对应的程序运行策略。

返回变量说明

State类型说明
chargingBoolean设备是否正在充电。
chargingTimeNumber电池完全充满电量所需的时间(单位:秒)
dischargingTimeNumber电池完全放电直到系统休眠剩余的时间(单位:秒)
levelNumber电池当前电量等级。取值在(0 ~ 1.0)区间

代码示例

import { useBattery } from '@vueuse/core'
 
const { charging, chargingTime, dischargingTime, level } = useBattery()

组件示例

<script setup lang="ts">
import { ref } from 'vue'
import { UseBattery } from '@vueuse/components'
</script>
<template>
  <UseBattery v-slot="{ charging }">
    是否正在充电: {{ charging }}
  </UseBattery>
</template>

在线例子

例子

类型定义

export interface BatteryManager extends EventTarget {
  charging: boolean
  chargingTime: number
  dischargingTime: number
  level: number
}
/**
 * Reactive Battery Status API.
 *
 * @see https://vueuse.org/useBattery
 */
export declare function useBattery(options?: ConfigurableNavigator): {
  isSupported: ComputedRef<boolean>
  charging: Ref<boolean>
  chargingTime: Ref<number>
  dischargingTime: Ref<number>
  level: Ref<number>
}
export type UseBatteryReturn = ReturnType<typeof useBattery>
Catalog
vueuse 入门 State 状态 Elements 元素 Browser 浏览器 Sensors 感应监测 onClickOutside 侦听元素外部点击 onKeyStroke 监听按键 onLongPress 长按事件 onStartTyping 非编辑元素输入时触发 useBattery 获取电池状态。 useDeviceMotion 设备方向及运动信息 useDeviceOrientation 方向变化信息 useDevicePixelRatio 屏幕像素比 useDevicesList 可用设备列表