Progress进度条模块

2024-09-19 16:13:08首发，1周前更新

Progress进度条是指数据加载状态、任务完成度，或事务进程；支持多种形态，包括条状、全圆、半圆和大半圆；支持多种主题颜色，包括渐变色；支持多种整体尺寸和轨道尺寸；支持任意数值的进度，不限于百分比。

简单使用

对文本容器使用ax-progress属性即可表示一个进度条，当然通常会使用value参数。

也可以通过id+new的方式创建实例。

不使用文字

参数label默认为true即显示进度结果文本，如果不需要可以设置label:false或label.enable:false予以隐藏。

方角边缘

参数linecap设置轨道两头的轮廓形状，默认为round即圆角，可设为square方角。

基础外观配置

属性	类型	默认值	说明
type	'line'/'circle'/'semicircle'/'gapcircle'	'line'	进度条类型
theme	'prim'/'succ'/'error'/'info'/'issue'/'warn'/''	''	颜色风格
gradient	boolean	false	是否使用渐变色
linecap	'round'/'square'	'round'	线条端点形状
size	'sm'/'md'/'lg'/''	''	进度条宽度
thk	'sm'/'md'/'lg'/''	''	进度条厚度
classes	string	''	追加样式类

取值配置

属性	类型	默认值	说明
range	array	[0, 100]	取值范围
value	number	0	初始进度值
steps	array	[]	进度阶段设置

动画配置

属性	类型	默认值	说明
curve	'easeOut'/'linear'/'easeIn'/'easeInOut'/'easeOutIn'	'easeOut'	动画曲线
duration	number	0	动画时长(ms)
rotate	boolean	false	是否旋转

显示控制

属性	类型	默认值	说明
simple	boolean	false	是否隐藏轨道
control	boolean	false	是否显示控制按钮

标签配置

属性	类型	默认值	说明
label.enable	boolean	true	是否显示文本
label.template	string	''	文本HTML模板
label.placement	string	''	文本位置
label.unit	string	'%'	单位
label.tips	boolean	false	是否显示提示

数字显示配置

属性	类型	默认值	说明
number.type	'percent'/'value'	'percent'	显示类型
number.trunc	boolean	true	是否取整
number.emphatic	boolean	false	是否强调显示

等待函数

属性	类型	默认值	说明
b4Set	function	null	设置值前等待函数

回调函数

属性	类型	默认值	说明
onStart	function	null	进程开始回调
onMove	function	null	进程进行中回调
onEnd	function	null	进程结束回调
onZero	function	null	进度为0%回调
onCompleted	function	null	进度完成回调
onSet	function	null	设置值后回调
onPause	function	null	暂停后回调
onContinue	function	null	继续进行回调
onRestored	function	null	恢复初始值回调