Vue3 中，如何實時獲取用戶電腦電量并展示？

作者：林三心不學挖掘機 2024-06-20 12:17:17

當用戶連接或斷開電源時，chargingchange 事件將被觸發(fā)。這個事件描述電池的充電狀態(tài)是否發(fā)生變化。

前幾天產品給我一個需求，需要在一個頁面上，實時展示用戶電腦的電量，我第一時間查閱資料，查到了如何去獲取電量，使用了 JavaScript 的一個 API。

navigator.getBattery

navigator.getBattery

這個 API 是一個函數(shù)，且執(zhí)行結果返回的是一個 Promise，所以如果我們要使用它，就得遵循 Promise 的用法

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

輸出的是一個 BatteryManager 對象，包含了這些屬性：

charging：代表當前電池是否正在充電
chargingTime：代表距離充電完畢還需多少秒，如果為 0 則充電完畢
dischargingTime：代表距離電池耗電至空且系統(tǒng)掛起需要多少秒
level：代表系統(tǒng)電量的水平，這個值放縮在 0.0 至 1.0 之間，也就是百分比

電池改變的事件

(1) chargingchange事件

當用戶連接或斷開電源時，該事件將被觸發(fā)。這個事件描述電池的充電狀態(tài)是否發(fā)生變化。例如，如果設備從充電狀態(tài)變成未充電狀態(tài)，或者從未充電狀態(tài)轉變?yōu)槌潆姞顟B(tài)，此事件將被觸發(fā)。

(2) levelchange事件

當用戶的電池電量發(fā)生變化時，該事件將被觸發(fā)。這個事件描述電池的電量百分比是否發(fā)生了變化。例如，如果用戶設備的電池電量從70%變?yōu)?0%，此事件將被觸發(fā)。

(3) chargingtimechange事件

當用戶設備的電池充電時間發(fā)生變化時，該事件將被觸發(fā)。這個事件描述電池充電所需的時間是否發(fā)生了變化。例如，如果設備被充電，所需的時間從45分鐘變成了30分鐘，此事件將被觸發(fā)。

(4) dischargingtimechange事件

當用戶設備的電池放電時間發(fā)生變化時，該事件將被觸發(fā)。這個事件描述電池放電所需的時間是否發(fā)生了變化。例如，如果設備處于放電狀態(tài)，所需的時間從3個小時變成了2個小時，此事件將被觸發(fā)。

封裝監(jiān)聽電池變化的hooks

代碼實現(xiàn)：

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>電池狀態(tài): {{ 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