更新记录

0.1.13（2024-08-22） 下载此版本

1. 修理文档错误

0.1.12（2024-06-07） 下载此版本

1. 修复渐变色不生效的问题
2. 更新示例
3. 更新文档

0.1.10（2023-10-25） 下载此版本

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

平台兼容性

<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. 一个包含线性渐变的颜色数组，颜色均匀分布

   [number, ...sring[]]

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

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

4. base64 格式图片。❗️❗️❗️实验性功能，可能引起性能问题，请谨慎使用❗️❗️❗️

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

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

🍉 pointer: string

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

🍉 pointerOffset: number

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

🍉 fixOverlay: boolean

是否启用修正。

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

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

🍉 debug: boolean

默认: false

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

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

🍎 兼容性说明

🍓 支持

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

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