更新记录

0.1.10（2023-10-25）

1. [feat] 增加 slot, 便于扩展组件功能
2. [fix] 修复父容器指定宽度时可能导致组件布局异常的bug
3. [fix] 其它fix

0.1.8（2023-09-20）

1. 修复示例文字错误

0.1.7（2023-09-20）

1. 添加 debug 模式，方便布局
2. 组件更名为 zui-progress-circle（原名：zui-meter-basic），明确组件功能

平台兼容性

<zui-progress-circle />

一款汽车仪表盘，环形温度指示器，环形进度条组件。支持自由弧度设置，支持图片纹理设置。

🍏 在线演示

💻 点我在浏览器里预览 https://uni.imgozi.cn/zui-progress-circle/

PS: 启动浏览器预览需要打开手机模器

📱 扫码体验

🍐 快速上手：

<zui-progress-circle :position="0.5" />

🍊 参数

🍉 size: number

组件尺寸

🍉 ringWidth: number

环形宽度

🍉 range: [number, number]

弧形起始角度范围，默认：[0, 360]。

值范围：[0, 360]

• 当起点角度小于终点角度时，按顺时针方向画圆弧；
• 当起点角度大于终点角度时，按逆时针方向画弧形；

🍉 position: number

当前位置，默认：0。

值范围：[0, 1]

🍉 direction: 'cw' | 'ccw' | 'clockwise' | 'counterclockwise'

进度绘制方向，默认：'cw'

• cw, clockwise 顺时针方向
• ccw, counterclockwise 逆时针方向

🍉 linecap: 'round' | 'butt' | 'flat'

弧形端点形状，默认：'round'

🍉 texture: string | [number, ...string[]] | [ string | [number, ...string[]], string | [number, ...string[]] ]

弧形纹理，默认：[ '#1BB507', '#E2D8D8' ]

• 只配置前景：'#1BB507'
• 同时配置前景与背景：[ '#1BB507', '#E2D8D8' ]

弧形的纹理支持以下几种形式：

1. CSS 颜色值

2. base64 格式图片。❗️❗️❗️实验性功能，请谨慎使用❗️❗️❗️

3. 一个包含线性渐变的颜色数组，颜色均匀分布

   [number, ...sring[]]

   第一个参数为渐变角度，第二个及以后的参数为颜色序列

4. 一段描述渐变的 SVG 代码，可完全自定义渐变。

当只指定一种纹理时，表示只设置前景纹理，背景为透明状态。

当指定两种纹理时，第一个纹理配置为前景纹理，第二个纹理配置为背景纹理

🍉 pinter: string

指针图片。图片尺寸要求宽度等于仪表盘尺寸的一半，高度不超过仪表盘尺寸的一半。

🍉 pinterOffset: number

指针偏移。用于调整指针中心点位置，默认位于指针图片的左侧垂直中心点位置。

🍉 fixOverlay: boolean

是否启用修正。

该参数仅在同时设置前景和背景和有效，用于解决前景无法完全覆盖背景的情况。

使用此修正的副作用是背景圆弧的宽度会比前景宽度小2像素。

🍉 debug: boolean

默认: false

开启 debug 模式，debug 模式会显示组件边界线，方便进行 UI 布局与 debug

🍓🍇🍉 喜欢就打赏一下 🍒🍑🥭

🍎 兼容性说明

🍓 支持

如果组件对您有帮助，请不吝打赏。肥宅快乐水🥤是创作动力！🥤🥤🥤

🍓🍇🍉 喜欢就打赏一下 🍒🍑🥭