更新记录
1.0.9(2024-06-17)
优化组件
1.0.8(2024-06-17)
优化组件
1.0.7(2024-06-05)
优化
查看更多
平台兼容性
HbuilderX/cli最低兼容版本 |
3.1.0 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
z-battery-capacity
<z-battery-capacity :battery="20"></z-battery-capacity>
<z-battery-capacity :battery="40"></z-battery-capacity>
<z-battery-capacity :battery="100"></z-battery-capacity>
<z-battery-capacity percentColor="#4cd964" :battery="100"></z-battery-capacity>
<z-battery-capacity percentColor="pink" :colors="colors" :battery="20"></z-battery-capacity>
<z-battery-capacity percentColor="skyblue" :colors="colors" :battery="60"></z-battery-capacity>
<z-battery-capacity percentColor="blue" :colors="colors" :battery="100"></z-battery-capacity>
const colors = [
{
value: 20,
color: 'pink'
},
{
value: 60,
color: 'skyblue'
},
{
value: 100,
color: 'blue'
}
]
props
属性 |
说明 |
类型 |
默认值 |
battery |
电量(0-100) |
Number |
0 |
percentColor |
百分比字体颜色 |
String |
#1c1c1c |
batteryWidth |
电池宽度(默认单位px) |
Number, String |
22 |
showPercent |
是否显示百分比 |
Boolean |
true |
colors |
电量色阶(必须为升序) |
Object |
{ "20": "red", "40": "yellow", "100": "#4cd964" } |
注意:
电量 < 0 显示: 0
电量 > 100 显示: 100
颜色变化
电量 <= 20 (red)
电量 <= 40(yellow)
电量 > 40 (#4cd964)