Automa-通過連接塊來自動化你的瀏覽器
1、前言通過瀏覽器插件可實(shí)現(xiàn)自動化腳本的錄制與編寫，具有代表性的工具就是：Selenium IDE、Katalon Recorder，對于簡單的業(yè)務(wù)來說可快速實(shí)現(xiàn)自動化的上手工作。Selenium IDEKat
前幾天產(chǎn)品給我一個需求，需要在一個頁面上，實(shí)時展示用戶電腦的電量，我第一時間查閱資料，查到了如何去獲取電量，使用了 JavaScript 的一個 API。
navigator.getBattery這個 API 是一個函數(shù)，且執(zhí)行結(jié)果返回的是一個 Promise，所以如果我們要使用它，就得遵循 Promise 的用法
navigator.getBattery().then((battery) => { console.log(battery)});輸出的是一個 BatteryManager 對象，包含了這些屬性：
(1) chargingchange事件
當(dāng)用戶連接或斷開電源時，該事件將被觸發(fā)。這個事件描述電池的充電狀態(tài)是否發(fā)生變化。例如，如果設(shè)備從充電狀態(tài)變成未充電狀態(tài)，或者從未充電狀態(tài)轉(zhuǎn)變?yōu)槌潆姞顟B(tài)，此事件將被觸發(fā)。
(2) levelchange事件
當(dāng)用戶的電池電量發(fā)生變化時，該事件將被觸發(fā)。這個事件描述電池的電量百分比是否發(fā)生了變化。例如，如果用戶設(shè)備的電池電量從70%變?yōu)?0%，此事件將被觸發(fā)。
(3) chargingtimechange事件
當(dāng)用戶設(shè)備的電池充電時間發(fā)生變化時，該事件將被觸發(fā)。這個事件描述電池充電所需的時間是否發(fā)生了變化。例如，如果設(shè)備被充電，所需的時間從45分鐘變成了30分鐘，此事件將被觸發(fā)。
(4) dischargingtimechange事件
當(dāng)用戶設(shè)備的電池放電時間發(fā)生變化時，該事件將被觸發(fā)。這個事件描述電池放電所需的時間是否發(fā)生了變化。例如，如果設(shè)備處于放電狀態(tài)，所需的時間從3個小時變成了2個小時，此事件將被觸發(fā)。
代碼實(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>
本文鏈接：http://www.tebozhan.com/showinfo-26-95155-0.htmlVue3 中，如何實(shí)時獲取用戶電腦電量并展示？
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號