更新记录

1.1.4(2024-08-23) 下载此版本

新增文档说明

1.1.3(2024-06-20) 下载此版本

修复bug

1.1.2(2024-06-19) 下载此版本

优化组件, 修复编辑器提示属性不存在

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

zu-battery

普通版本

组件支持uvue页面

            <!-- 基础用法 -->
            <zu-battery :battery="20"></zu-battery>
            <zu-battery :battery="40"></zu-battery>
            <zu-battery :battery="60"></zu-battery>
            <!-- 不显示百分比 -->
            <zu-battery :showPercent="false" :battery="60"></zu-battery>
            <!-- 修改字体颜色 -->
            <zu-battery :battery="60" color="red"></zu-battery>
            <!-- 修改宽度 -->
            <zu-battery :battery="60" width="30"></zu-battery>
            <!-- 修改高度 -->
            <zu-battery :battery="80" height="14"></zu-battery>
            <zu-battery :battery="80" height="10"></zu-battery>
            <!-- 修改色阶 -->
            <zu-battery :battery="20" :batteryValues="batteryValues" :batteryColors="batteryColors"></zu-battery>
            <zu-battery :battery="40" :batteryValues="batteryValues" :batteryColors="batteryColors"></zu-battery>
            <zu-battery :battery="60" :batteryValues="batteryValues" :batteryColors="batteryColors"></zu-battery>

const batteryValues = [20, 40, 100]

const batteryColors = ['#ff0000', '#ffff00', '#4cd964']

props

属性 说明 类型 默认值
battery 电量(0-100) Number 0
color 百分比字体颜色 String #1c1c1c
width 电池宽度(默认单位px, 可传rpx) String 22
height 电池高度(默认单位px) 建议传入双数 String 12
showPercent 是否显示百分比 Boolean false
batteryValues 电量色阶(必须为升序) Array [20, 40, 100]
batteryColors 电量色阶(必须为升序) Array ['#ff0000', '#ffff00', '#4cd964']

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问