Vue3 中，如何實(shí)時(shí)獲取用戶電腦電量并展示？
前幾天產(chǎn)品給我一個(gè)需求，需要在一個(gè)頁(yè)面上，實(shí)時(shí)展示用戶電腦的電量，我第一時(shí)間查閱資料，查到了如何去獲取電量，使用了 JavaScript 的一個(gè) API。
navigator.getBatterynavigator.getBattery
這個(gè) API 是一個(gè)函數(shù)，且執(zhí)行結(jié)果返回的是一個(gè) Promise，所以如果我們要使用它，就得遵循 Promise 的用法
navigator.getBattery().then((battery) => {
console.log(battery)
});輸出的是一個(gè) BatteryManager 對(duì)象，包含了這些屬性：
- charging： 代表當(dāng)前電池是否正在充電
- chargingTime： 代表距離充電完畢還需多少秒，如果為 0 則充電完畢
- dischargingTime： 代表距離電池耗電至空且系統(tǒng)掛起需要多少秒
- level： 代表系統(tǒng)電量的水平，這個(gè)值放縮在 0.0 至 1.0 之間，也就是百分比
電池改變的事件
(1) chargingchange事件
當(dāng)用戶連接或斷開電源時(shí)，該事件將被觸發(fā)。這個(gè)事件描述電池的充電狀態(tài)是否發(fā)生變化。例如，如果設(shè)備從充電狀態(tài)變成未充電狀態(tài)，或者從未充電狀態(tài)轉(zhuǎn)變?yōu)槌潆姞顟B(tài)，此事件將被觸發(fā)。
(2) levelchange事件
當(dāng)用戶的電池電量發(fā)生變化時(shí)，該事件將被觸發(fā)。這個(gè)事件描述電池的電量百分比是否發(fā)生了變化。例如，如果用戶設(shè)備的電池電量從70%變?yōu)?0%，此事件將被觸發(fā)。
(3) chargingtimechange事件
當(dāng)用戶設(shè)備的電池充電時(shí)間發(fā)生變化時(shí)，該事件將被觸發(fā)。這個(gè)事件描述電池充電所需的時(shí)間是否發(fā)生了變化。例如，如果設(shè)備被充電，所需的時(shí)間從45分鐘變成了30分鐘，此事件將被觸發(fā)。
(4) dischargingtimechange事件
當(dāng)用戶設(shè)備的電池放電時(shí)間發(fā)生變化時(shí)，該事件將被觸發(fā)。這個(gè)事件描述電池放電所需的時(shí)間是否發(fā)生了變化。例如，如果設(shè)備處于放電狀態(tài)，所需的時(shí)間從3個(gè)小時(shí)變成了2個(gè)小時(shí)，此事件將被觸發(fā)。
封裝監(jiān)聽電池變化的hooks
代碼實(shí)現(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>兼容性
