前幾天產品給我一個需求，需要在一個頁面上，實時展示用戶電腦的電量，我第一時間查閱資料，查到了如何去獲取電量，使用了 JavaScript 的一個 API。0tZ28資訊網——每日最新資訊28at.com

0tZ28資訊網——每日最新資訊28at.com

navigator.getBattery

navigator.getBattery

這個 API 是一個函數，且執行結果返回的是一個 Promise，所以如果我們要使用它，就得遵循 Promise 的用法0tZ28資訊網——每日最新資訊28at.com

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

輸出的是一個 BatteryManager 對象，包含了這些屬性：0tZ28資訊網——每日最新資訊28at.com

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

電池改變的事件

(1) chargingchange事件0tZ28資訊網——每日最新資訊28at.com

當用戶連接或斷開電源時，該事件將被觸發。這個事件描述電池的充電狀態是否發生變化。例如，如果設備從充電狀態變成未充電狀態，或者從未充電狀態轉變為充電狀態，此事件將被觸發。0tZ28資訊網——每日最新資訊28at.com

(2) levelchange事件0tZ28資訊網——每日最新資訊28at.com

當用戶的電池電量發生變化時，該事件將被觸發。這個事件描述電池的電量百分比是否發生了變化。例如，如果用戶設備的電池電量從70%變為50%，此事件將被觸發。0tZ28資訊網——每日最新資訊28at.com

(3) chargingtimechange事件0tZ28資訊網——每日最新資訊28at.com

當用戶設備的電池充電時間發生變化時，該事件將被觸發。這個事件描述電池充電所需的時間是否發生了變化。例如，如果設備被充電，所需的時間從45分鐘變成了30分鐘，此事件將被觸發。0tZ28資訊網——每日最新資訊28at.com

(4) dischargingtimechange事件0tZ28資訊網——每日最新資訊28at.com

當用戶設備的電池放電時間發生變化時，該事件將被觸發。這個事件描述電池放電所需的時間是否發生了變化。例如，如果設備處于放電狀態，所需的時間從3個小時變成了2個小時，此事件將被觸發。0tZ28資訊網——每日最新資訊28at.com

封裝監聽電池變化的hooks

代碼實現：0tZ28資訊網——每日最新資訊28at.com

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：0tZ28資訊網——每日最新資訊28at.com

<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>

兼容性

0tZ28資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-95155-0.htmlVue3 中，如何實時獲取用戶電腦電量并展示？

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 提升 System.Text.Json 處理性能的策略

下一篇： DDD學習與感悟：：跳出 CRUD 的思維定式