tui-circular-progress 圆形进度条 开源组件

介绍

圆形进度条，可设置大小颜色等基本样式，可显示进度或自定义显示内容。

特别说明

APP和H5端建议使用 tui-round-progress 组件，此组件为renderjs版本，性能更高。

同样，微信小程序原生也提供了相应的 tui-round-progress 组件。

需要注意的是，uni-app中 tui-circular-progress 组件可以使用在APP、H5、微信/支付宝/QQ/百度/头条小程序等平台，而 tui-round-progress 组件只可使用在App与H5端。

组件的API使用方法一致。

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiCircularProgress from "@/components/thorui/tui-circular-progress/tui-circular-progress.vue"
export default {
	components:{
		tuiCircularProgress
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。

uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	✓	✓	✓	✓	✓	✓	✓

微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-circular-progress": "/components/thorui/tui-circular-progress/tui-circular-progress"
  }
}

代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础使用

通过 percentage 属性设置进度百分比 [10% 传值 10]，progressColor 属性设置进度条颜色，fontColor 属性设置圆环进度字体颜色。

<!--uni-app-->
<tui-circular-progress :percentage="0"></tui-circular-progress>
<tui-circular-progress progressColor="#EB0909" fontColor="#EB0909" :percentage="70"></tui-circular-progress>
<tui-circular-progress progressColor="#19be6b" fontColor="#19be6b" :percentage="100"></tui-circular-progress>

<!--微信小程序-->
<tui-circular-progress percentage="{{0}}"></tui-circular-progress>
<tui-circular-progress progressColor="#EB0909" fontColor="#EB0909" percentage="{{70}}"></tui-circular-progress>
<tui-circular-progress progressColor="#19be6b" fontColor="#19be6b" percentage="{{100}}"></tui-circular-progress>

改变大小

通过 diam 属性设置圆形进度条(画布)宽度(直径)[px]，lineWidth 属性设置进度条线条宽度[px]。

<!--uni-app-->
<tui-circular-progress :percentage="60" :diam="80" :fontSize="16"></tui-circular-progress>
<tui-circular-progress :percentage="60" :diam="100" :lineWidth="10" :fontSize="20"></tui-circular-progress>

<!--微信小程序-->
<tui-circular-progress percentage="{{60}}" diam="80" fontSize="16"></tui-circular-progress>
<tui-circular-progress percentage="{{60}}" diam="100" lineWidth="10" fontSize="20"></tui-circular-progress>

Slots

插槽名称	插槽说明
default	进度条内自定义显示内容

Props

属性名	类型	说明	默认值
diam	Number	圆形进度条(画布)宽度，直径 [px]	60
height	Number	圆形进度条(画布)高度，默认取diam值[当画半弧时传值，height大于0时则取height]	0
lineWidth	Number	进度条线条宽度[px]	4
lineCap	String	线条的端点样式 butt：向线条的每个末端添加平直的边缘 round：向线条的每个末端添加圆形线帽 square：向线条的每个末端添加正方形线帽	round
fontSize	Number	圆环进度字体大小 [px]	12
fontColor	String	圆环进度字体颜色	#5677fc
fontShow	Boolean	是否显示进度文字	true
percentText	String	自定义显示文字	-
defaultShow	Boolean	是否显示默认(背景)进度条	true
defaultColor	String	默认进度条颜色	#CCC
progressColor	String	进度条颜色	#5677fc
gradualColor	String	进度条渐变颜色[结合progressColor使用，默认为空]	-
sAngle	Number	起始弧度，单位弧度	-Math.PI / 2
counterclockwise	Boolean	指定弧度的方向是逆时针还是顺时针。默认是false，即顺时针	false
percentage	Number	进度百分比 [10% 传值 10]	0
multiple	Number	进度百分比缩放倍数[使用半弧为100%时，则可传2]	1
duration	Number	动画执行时间[单位毫秒，低于50无动画]	800
activeMode	String	backwards: 动画从头播；forwards：动画从上次结束点接着播	backwards

Events

注：uni-app端绑定事件使用@前缀，如@change；微信小程序原生使用bind前缀，如bindchange

事件名	说明	回调参数
change	动画执行时回传百分比	{percentage:Number}
end	进度动画执行完成	{canvasId:canvasId}

预览

请以移动端效果为准，touch事件目前尚未在PC端做兼容。

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码