更新记录

0.0.1（2024-09-03） 下载此版本

• init

平台兼容性

uni-app

uni-app x

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

打赏

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