Vue3 中，如何实时获取用户电脑电量并展示？-51CTO.COM

前几天产品给我一个需求，需要在一个页面上，实时展示用户电脑的电量，我第一时间查阅资料，查到了如何去获取电量，使用了 JavaScript 的一个 API。

navigator.getBattery

navigator.getBattery

这个 API 是一个函数，且执行结果返回的是一个 Promise，所以如果我们要使用它，就得遵循 Promise 的用法

navigator.getBattery().then((battery) => {
 console.log(battery)
});

输出的是一个 BatteryManager 对象，包含了这些属性：

charging：代表当前电池是否正在充电
chargingTime：代表距离充电完毕还需多少秒，如果为 0 则充电完毕
dischargingTime：代表距离电池耗电至空且系统挂起需要多少秒
level：代表系统电量的水平，这个值放缩在 0.0 至 1.0 之间，也就是百分比

电池改变的事件

(1) chargingchange事件

当用户连接或断开电源时，该事件将被触发。这个事件描述电池的充电状态是否发生变化。例如，如果设备从充电状态变成未充电状态，或者从未充电状态转变为充电状态，此事件将被触发。

(2) levelchange事件

当用户的电池电量发生变化时，该事件将被触发。这个事件描述电池的电量百分比是否发生了变化。例如，如果用户设备的电池电量从70%变为50%，此事件将被触发。

(3) chargingtimechange事件

当用户设备的电池充电时间发生变化时，该事件将被触发。这个事件描述电池充电所需的时间是否发生了变化。例如，如果设备被充电，所需的时间从45分钟变成了30分钟，此事件将被触发。

(4) dischargingtimechange事件

当用户设备的电池放电时间发生变化时，该事件将被触发。这个事件描述电池放电所需的时间是否发生了变化。例如，如果设备处于放电状态，所需的时间从3个小时变成了2个小时，此事件将被触发。

封装监听电池变化的hooks

代码实现：

import { ref, onMounted, onUnmounted } from 'vue';

export function useBattery() {
  const battery = ref(navigator.battery || navigator.getBattery());

  function updateBatteryStatus() {
    battery.value = navigator.battery || navigator.getBattery();
  }

  onMounted(() => {
    updateBatteryStatus();
    navigator.getBattery().then(() => {
      navigator.battery.addEventListener('chargingchange', updateBatteryStatus);
      navigator.battery.addEventListener('levelchange', updateBatteryStatus);
      navigator.battery.addEventListener('chargingtimechange', updateBatteryStatus);
      navigator.battery.addEventListener('dischargingtimechange', updateBatteryStatus);
    });
  });

  onUnmounted(() => {
    navigator.battery.removeEventListener('chargingchange', updateBatteryStatus);
    navigator.battery.removeEventListener('levelchange', updateBatteryStatus);
    navigator.battery.removeEventListener('chargingtimechange', updateBatteryStatus);
    navigator.battery.removeEventListener('dischargingtimechange', updateBatteryStatus);
  });

  return battery;
}

使用hooks：

<template>
  <div>
    <div>电池状态: {{ batteryState }}</div>
    <div>电池剩余: {{ batteryLevel }}%</div>
  </div>
</template>

<script>
import { useBattery } from '@/hooks/useBattery';

export default {
  setup() {
    const battery = useBattery();
    const batteryLevel = computed(() => Math.round(battery.value.level * 100));
    const batteryState = computed(() => battery.value.charging ? '充电中' : '未充电');
    return { batteryLevel, batteryState };
  },
};
</script>

Vue3 中，如何实时获取用户电脑电量并展示？

navigator.getBattery

电池改变的事件

封装监听电池变化的hooks

兼容性