更新记录

0.0.1(2024-09-03) 下载此版本

  • init

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 4.26 app-vue app-uvue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

lime-progress 进度条

  • 用于展示操作的当前进度。支持设置线条/颜色等个性设置。uniappx app 安卓端基于drawble实现,兼容uniapp/uniappx(web,ios,安卓)。

安装

在插件市场导入即可。

代码演示

基础

进度条默认为蓝色,使用 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/compoents/lime-progress -->
<lime-progress />

插件标签

  • 默认 l-progress 为 component
  • 默认 lime-progress 为 demo

关于vue2的使用方式

  • 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
  • 关键代码是: 在main.js中 在vue2部分加上这一段即可
    // vue2
    import Vue from 'vue'
    import VueCompositionAPI from '@vue/composition-api'
    Vue.use(VueCompositionAPI)

API

Props

参数 说明 类型 默认值
percent 百分比 number -
showInfo 显示当前进度 Boolean false
strokeColor 进度条颜色 string #1677ff
strokeWidth 进度条线宽 number | string 4px
trailColor 进度条背景色 string rgba(0, 0, 0, 0.06)
infoAlign 进度值对齐,可选start string end
infoType 进度值显示位置,可选inner string outer
fontSize 进度值字体大小 number | string -
infoColor 进度值文本颜色 string black

打赏

如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问