# tui-circular-progress 圆形进度条

介绍

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

特别说明

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

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

需要注意的是,uni-app中 tui-circular-progress 组件可以使用在APP、H5、微信小程序三端,而 tui-round-progress 组件只可使用在App与H5端。

组件的API使用方法一致。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

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

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

# 微信小程序引入(可在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 Boolean 圆形进度条(画布)高度,默认取diam值[当画半弧时传值,height大于0时则取height] 0
lineWidth Boolean 进度条线条宽度[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

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

# 预览

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

# 线上程序扫码预览

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