圆形进度条

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

组件结构

<template>
	<view class="tui-circular-container" :style="{ width: diam + 'px', height: (height || diam) + 'px' }">
		<canvas class="tui-circular-default" :canvas-id="defaultCanvasId" :id="defaultCanvasId" :style="{ width: diam + 'px', height: (height || diam) + 'px' }"
		 v-if="defaultShow"></canvas>
		<canvas class="tui-circular-progress" :canvas-id="progressCanvasId" :id="progressCanvasId" :style="{ width: diam + 'px', height: (height || diam) + 'px' }"></canvas>
		<slot />
	</view>
</template>

组件脚本

<script>
	export default {
		name: 'tuiCircularProgress',
		
		...省略n行
		
	}
</script>

组件样式

... 此处省略n行

脚本说明

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

methods

名称 描述
@change 动画执行时回传百分比
@end 进度动画执行完成

示例

H5预览地址

https://www.thorui.cn/h5/#/pages/extend/circular-progress/circular-progress

H5二维码

小程序二维码