LimeProgress 进度条组件

一个功能丰富的进度条组件，支持百分比显示、自定义颜色、动画效果等功能。适用于任务进度展示、文件上传进度等多种场景。

插件依赖：lime-shared、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 进度条组件文档 - 站点1
• 进度条组件文档 - 站点2
• 进度条组件文档 - 站点3

安装方法

1. 在uni-app 中搜索并导入lime-progress
2. 导入后可能需要重新编译项目
3. 在页面中使用l-progress组件

代码演示

基础

进度条默认为蓝色，使用 percent 属性来设置当前进度。。

<l-progress :percent="percent"></l-progress>

显示百分比

通过设置 show-info，显示当前数值 。

<l-progress :percent="percent" :show-info="true"></l-progress>

改变进度数值位置

通过设置 info-type，显示当前数值在内部还是外部inner | outer, 默认为 outer。通过设置 info-align，显示当前数值对齐位置是在前方还是后方end | start,默认是end。

<l-progress :percent="percent" info-type="inner" info-align="start" :show-info="true" info-color="white"></l-progress>
<l-progress :percent="percent" info-align="start" :show-info="true"></l-progress>
<l-progress :percent="percent" info-align="end" :show-info="true"></l-progress>

颜色

通过 strokeColor 设置进度条的颜色。通过 trailColor 设置进度条的背景色。

<l-progress :percent="percent" strokeColor="#7232dd"></l-progress>
<l-progress :percent="percent" strokeColor="#7232dd" info-type="inner" info-align="end" :show-info="true" info-color="white" ></l-progress>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-progress/components/l-progress -->
<lime-progress />

插件标签说明

标签名	说明
l-progress	进度条组件
lime-progress	演示标签

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Props 属性说明

属性名	说明	类型	默认值
percent	进度百分比	number	0
showInfo	是否显示进度信息	boolean	false
infoType	进度信息显示位置（outer或inner）	string	'outer'
infoAlign	进度信息对齐方式	string	'end'
strokeColor	进度条颜色	string	-
trailColor	背景条颜色	string	-
linecap	进度条端点形状	string	-
infoColor	进度信息颜色	string	-
fontSize	进度信息字体大小	string | number	-
strokeWidth	进度条宽度	string | number	-

Events 事件

事件名	说明	回调参数
change	进度变化时触发	percent: number

主题定制

组件提供了以下CSS变量，可用于自定义样式：

变量名称	默认值	描述
--progress-stroke-color	$primary-color	进度条颜色
--progress-stroke-width	4px	进度条宽度
--progress-trail-color	$gray-3	背景条颜色
--progress-border-radius	99px	进度条圆角
--progress-duration	300ms	动画持续时间
--progress-anim-time-fn	cubic-bezier(0, 0, 0.15, 1)	动画时间函数
--progress-text-color	$text-color-2	进度信息文字颜色
--progress-font-size	10px	进度信息字体大小
--progress-inner-text-color	white	内嵌进度信息文字颜色

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助

源代码

组件源码