uniapp电量百分比显示组件

发表于2024-11-25|更新于2026-02-24

|浏览量:

人人保持头冷脚暖，医师就大叹赚钱难。——佚名

今天有个需求是显示电池电量，我在uniapp的插件市场找到一款

https://ext.dcloud.net.cn/plugin?id=7421

不过不满足需求，电量发生变化后没有实时更新，是因为用的data而不是computed

样式也需要调整美化一下，修改以后的完成品：

相关推荐

vue-awesome-paginate

尽量在舒适的情况下工作。记住，身体的紧张会制造肩痛和精神疲劳。 —— 卡耐基 https://github.com/peshanghiwa/vue-awesome-paginate vue-awesome-paginate：Vue.js 3 的强大分页解决方案在 Web 应用开发中，分页是一个常见的功能，尤其是在处理大数据集时。vue-awesome-paginate 是一个专为 Vue.js 3 打造的分页库，它以简单、高效和灵活的特点，帮助开发者快速实现分页功能。什么是 vue-awesome-paginate？vue-awesome-paginate 是一个开源库，旨在为 Vue.js 3 应用提供强大的分页解决方案。它具有高度的可定制性，支持多种分页样式，并且易于与现有项目集成。核心特点：简洁的 API：快速上手，减少开发时间。高度可定制：支持样式和行为的全面定制。轻量级：库体积小，性能优异。 Vue 3 支持：专为 Vue.js 3 设计，充分利用其功能特性。使用场景vue-awesome-paginate 适用于以下场景：数据表格分页在数据密...

图片懒加载（二）

何以息谤？曰：“无辩”。何以止怨？曰：“无争”。——王通之前写了图片懒加载今天来一种方式： https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img#attr-loading 采取loading="lazy"方式延迟加载图像，直到它和视口接近到一个计算得到的距离（由浏览器定义）。目的是在需要图像之前，避免加载图像所需要的网络和存储带宽。这通常会提高大多数典型用场景中内容的性能。 123456789101112131415161718192021222324252627282930313233343536373839404142<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .ruben { width...

typescript-exercises（十一）

人只有在人们中间才能认识自己。——歌德题目： 1234declare module 'str-utils' { // export const ... // export function ...} 报错： 123456index.ts(2,5): error TS2305: Module '"str-utils"' has no exported member 'strReverse'.index.ts(3,5): error TS2305: Module '"str-utils"' has no exported member 'strToLower'.index.ts(4,5): error TS2305: Module '"str-utils"' has no exported member 'strToUpper'.index.ts(...

css的透视效果perspective

有两件事我最憎恶：没有信仰的博才多学和充满信仰的愚昧无知。——爱默生我们知道css中我们的transform可以调整z轴，这说明css是有3d能力的但是我们通常看一个3d的物体，是近的地方大，远的地方小甚至被遮挡，要实现这样的透视效果其实只需要一个css属性即可 https://developer.mozilla.org/zh-CN/docs/Web/CSS/perspective 就比如这个正方体： .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff } .front { background: rgba(90,90,90,.7); transform: translateZ(50px)...

jq根据屏幕高度设置元素高度

没有哪一个聪明人会否定痛苦与忧愁的锻炼价值——赫胥黎很简单一行代码： 1$('#ruben').css('height', $(window).height()); 这里$(window).height()获取了屏幕高度然后用css函数去设置style

uniCloud查询数据库

江流宛转绕芳甸，月照花林皆似霰。——张若虚首先先右键项目中的database目录，没有的话自己手动创建一个，选择新建DB Schema 输入表名，点击创建将read改为true 点击上传DB Schema 点击是我们刷新云控制台可以看到成功上传我们添加两条记录 1234{ "name": "ruben", "phone": "13888888888"} 点击确定新建一个list页面写入代码： 12345678910111213141516171819<template> <view> <unicloud-db v-slot:default="{ data, loading, error, options }" collection="contacts"> <view v-if="error">...

阿超

我的名字叫阿超年龄25岁家在北京市职业是软件开发每天最晚也会在八点前回家不抽烟酒浅尝辄止晚上十二点上床保证睡足八个小时睡前写一篇博客再做二十分钟俯卧撑暖身然后再睡觉基本能熟睡到天亮像婴儿一样不留下任何疲劳和压力就这样迎来第二天的早晨健康检查结果也显示我很正常我想说明我是一个不论何时都追求内心平稳的人不拘泥于胜负不纠结于烦恼不树立使我夜不能寐的敌人这就是我在这社会的生活态度

数据加载中