引入组件

局部引入

const FCircularProgress = defineAsyncComponent(
  () => import('@/components/formaui/f-circular-progress/f-circular-progress.vue')
)

基础用法

percentage属性：进度百分比（10% 传 10）

<f-circular-progress :percentage="70" />

<f-circular-progress active-color="#EB0909" font-color="#EB0909" :percentage="70" />

isTextShow属性：是否显示进度文字（默认true）

<f-circular-progress :is-text-show="false" :percentage="50" />

text属性：自定义中心文字

<f-circular-progress text="拼团" active-color="#EB0909" :percentage="80" />

showTrack / trackColor属性：背景轨道

<f-circular-progress track-color="rgba(255,121,0,0.1)" active-color="#ff7900" :percentage="50" />

gradientColor属性：渐变结束色

<f-circular-progress :show-track="false" active-color="#ff7900" gradient-color="#5677fc" :percentage="80" />

diameter / lineWidth / fontSize属性：尺寸（单位 px）

<f-circular-progress :percentage="60" :diameter="80" :font-size="16" />
<f-circular-progress :percentage="60" :diameter="100" :line-width="10" :font-size="20" />

isCounterclockwise / activeMode属性：逆时针与动画续播

<f-circular-progress :percentage="progress" is-counterclockwise active-mode="forwards" />

半圆进度：height、startAngle 与插槽

<f-circular-progress
  :is-text-show="false"
  :percentage="40"
  :start-angle="-Math.PI"
  :diameter="240"
  :height="130"
  :line-width="12"
  @change="onChange">
  <view>自定义内容 {{ progress }}%</view>
</f-circular-progress>

插槽

名称	说明
default	自定义中心区域内容，覆盖默认百分比文字

属性

属性名	类型	说明	默认值
diameter	number	画布直径（px）	60
height	number	画布高度，半弧时使用（px）	0（取 diameter）
lineWidth	number	线宽（px）	4
lineCap	'butt' | 'round' | 'square'	线条端点	'round'
fontSize	number	文字大小（px）	12
fontColor	string	文字颜色	主题色
isTextShow	boolean	是否显示进度文字	true
text	string	自定义文字，空则显示百分比	''
showTrack	boolean	是否显示背景轨道	true
trackColor	string	背景轨道颜色	#CCCCCC
activeColor	string	进度条颜色	主题色
gradientColor	string	渐变结束色	''
startAngle	number	起始弧度	-π/2
isCounterclockwise	boolean	是否逆时针	false
percentage	number	进度 0～100	0
multiple	number	百分比缩放倍数	1
duration	number	动画时长（ms）	800
activeMode	'backwards' | 'forwards'	动画模式	'backwards'

事件

事件名	说明	回调参数
change	进度变化	{ percentage: number }
end	动画结束	{ canvasId: string, percentage: number }