Circle 圆形进度条 
概述
Circle 圆形进度条，用于展现某个任务的当前进度。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
温馨提示
使用前请先阅读uni-app官方 canvas组件 (opens new window) 注意事项。
头条（字节）小程序颜色值不支持简写，如：#EEEEEE 不可以简写成#eee。
Nvue下Canvas是作为独立的模块，云端打包时需要选择使用Canvas模块才能正常使用相关的功能。 需要在manifest.json的代码视图中配置如下（暂时还不支持可视化界面操作）：
"app-plus" : {
/* 模块配置 */
"modules" : {
"Canvas" : "nvue canvas" //使用Canvas模块
}
}
1
2
3
4
5
6
2
3
4
5
6
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiCircle from "@/components/firstui/fui-circle/fui-circle.vue"
export default {
components:{
fuiCircle
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。
基础使用
通过 percent 属性设置百分比（0~100）。
<fui-circle :percent="80"></fui-circle>
1
调整样式/渐变
通过 percent 属性设置百分比，color 属性设置百分比字体颜色，background 属性设置进度环默认背景色，foreground 属性设置进度环默认前景色，gradient 属性设置渐变色，width 属性设置进度条宽高，strokeWidth 属性设置进度环宽度，size 属性设置百分比字体大小。
<fui-circle :percent="75" color="#FFB703" background="#eee" foreground="#FFB703" gradient="#FAE845" :width="200" :strokeWidth="6" :size="16"></fui-circle>
1
# Slots
| 插槽名称 | 说明 |
|---|---|
| default | 百分比区域自定义显示内容 |
# Props
注意：头条（字节）小程序颜色值不支持简写，如：#CCCCCC 不可以简写成#ccc。
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| percent | Number, String | 进度百分比，取值范围：0-100 | 0 | - |
| width | Number, String | 进度条宽高（直径），单位rpx | 120 | - |
| fillStyle V1.5.0+ | String | 画布背景填充颜色，Nvue下IOS端设置透明背景无效，不支持rgba | #FFFFFF | 仅Nvue且IOS端支持 |
| strokeWidth | Number, String | 进度环（画笔）的宽度，单位 px | 4 | - |
| lineCap | String | 进度环的线头样式，可选值为 square、round、butt | round | - |
| size | Number, String | 圆环进度百分比字体大小，单位 px | 12 | - |
| color | String | 圆环进度百分比字体颜色 | #465CFF | - |
| show | Boolean | 是否显示进度百分比文字 | true | - |
| background | String | 进度环默认背景颜色 | #CCCCCC | - |
| defaultShow | Boolean | 是否显示进度环默认背景颜色 | true | - |
| foreground | String | 进度环前景颜色 | #465CFF | - |
| gradient V1.9.5+ | String | 进度环渐变色，与 foreground 配合使用 | - | Nvue端和快手小程序暂不支持 |
| sAngle | Number | 进度环动画的开始角度（默认在3点钟方向），Math.PI * sAngle | 0 | - |
| counterclockwise | Boolean | 设置圆形进度条是顺时针旋转，还是逆时针旋转。true 表示逆时针旋转，false 表示顺时针旋转 | false | - |
| speed | Number, String | 动画执行速度，值越大动画越快，可选值：1~100 | 1 | - |
| activeMode | String | 动画执行方式，可选值：backwards（动画从头播）、forwards（动画从上次结束点接着播） | forwards | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @change | 每一个动画帧之后的回调函数 | { percent:百分比 } |
| @end | 进度动画完成事件 | { canvasId:唯一标识符 } |
TIP
注：若 nvue android端报以下错误，暂时不用处理！
reportJSException >>>> exception function:gcanvas setBackGround for android view,
exception:WX_RENDER_ERR_TEXTURE_SETBACKGROUND:
TextureView doesn't support displaying a background drawable!
1
2
3
2
3
示例预览
# 示例代码地址
VIP内容代码请查看订单页下载的组件库示例源码。# 特别说明
该组件为付费组件，UNI-APP版VIP用户可免费使用 。