133 lines
4.3 KiB
Markdown
133 lines
4.3 KiB
Markdown
|
# lx-progress-bar
|
|||
|
|
|
|||
|
|
# lx-progress-bar 进度条组件
|
|||
|
|
1. 支持单色，双色，渐变色显示
|
|||
|
|
2. 文字支持外显、内显(双色进度条，文字只能内显)，可设置文字大小、颜色
|
|||
|
|
3. 可设置底色
|
|||
|
|
4. 可设置圆角、进度条高度、进度条最小宽度(避免内容不能展示)
|
|||
|
|
5. 可选择展示百分比/数值
|
|||
|
|
6. 可选择是否使用动画加载
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 基本用法
|
|||
|
|
导入方法：
|
|||
|
|
1. 直接使用 HBuilderX 导入插件
|
|||
|
|
2. 下载插件 zip ,将 lx-progress-bar 文件夹复制到项目 components 文件夹中，import+components 引入。
|
|||
|
|
|
|||
|
|
使用方法(demo)：
|
|||
|
|
```js
|
|||
|
|
<template>
|
|||
|
|
<!-- lx-progress-bar 组件示例 -->
|
|||
|
|
<view class="container">
|
|||
|
|
<view class="container-item">
|
|||
|
|
<lx-progress-bar title="单色进度条" :total="10" :first-value="6" />
|
|||
|
|
</view>
|
|||
|
|
<view class="container-item">
|
|||
|
|
<lx-progress-bar
|
|||
|
|
title="双色进度条"
|
|||
|
|
:total="10"
|
|||
|
|
:first-value="6"
|
|||
|
|
:second-value="2"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view class="container-item">
|
|||
|
|
<lx-progress-bar
|
|||
|
|
title="渐变色进度条"
|
|||
|
|
:total="10"
|
|||
|
|
:first-value="6"
|
|||
|
|
content-color="linear-gradient(to right, #4cd964 , #daff20)"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view class="container-item">
|
|||
|
|
<lx-progress-bar
|
|||
|
|
title="文字外显"
|
|||
|
|
:total="10"
|
|||
|
|
:first-value="6"
|
|||
|
|
textPosition="outside"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view class="container-item">
|
|||
|
|
<lx-progress-bar
|
|||
|
|
title="自定义文字"
|
|||
|
|
:total="10"
|
|||
|
|
:first-value="6"
|
|||
|
|
text-color="#ffffff"
|
|||
|
|
text-size="16px"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view class="container-item">
|
|||
|
|
<lx-progress-bar
|
|||
|
|
title="设置圆角,高度,最小宽度"
|
|||
|
|
:total="10"
|
|||
|
|
:first-value="0.1"
|
|||
|
|
bar-radius="5vw"
|
|||
|
|
bar-height="8vw"
|
|||
|
|
min-width="10vw"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view class="container-item">
|
|||
|
|
<lx-progress-bar
|
|||
|
|
title="百分比展示,可设置展示几位小数"
|
|||
|
|
:total="10"
|
|||
|
|
:first-value="6"
|
|||
|
|
percentum
|
|||
|
|
precision="1"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view class="container-item">
|
|||
|
|
<lx-progress-bar
|
|||
|
|
title="自定义标题"
|
|||
|
|
titleStyle="font-size:5vw; color: #007aff;"
|
|||
|
|
:total="10"
|
|||
|
|
:first-value="6"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view class="container-item">
|
|||
|
|
<lx-progress-bar
|
|||
|
|
title="动画加载"
|
|||
|
|
:total="10"
|
|||
|
|
:first-value="6"
|
|||
|
|
animation
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.container {
|
|||
|
|
padding: 0 4vw;
|
|||
|
|
|
|||
|
|
&-item {
|
|||
|
|
margin: 3vw 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### Attributes and Events
|
|||
|
|
| 参数 | 类型 | 说明 | 是否必传 |
|
|||
|
|
|------------------ |------------------ |------------------------------------------- |---------- |
|
|||
|
|
| title | String | 进度条标题 | 是 |
|
|||
|
|
| titleStyle | String | 标题样式，写法见 demo(示例) | 否 |
|
|||
|
|
| total | Number | 总数，用作计算分母 | 是 |
|
|||
|
|
| firstValue | Number | 进度值 | 是 |
|
|||
|
|
| secondValue | Number | 第二个进度值，传值后显示双色进度条 | 否 |
|
|||
|
|
| backColor | String | 进度条背景色 | 否 |
|
|||
|
|
| barHeight | String | 进度条高度，支持 px,rpx,vw,rem | 否 |
|
|||
|
|
| barRadius | String | 进度条圆角，支持 px,rpx,vw,rem | 否 |
|
|||
|
|
| contentColor | String | 进度条颜色，支持渐变 | 否 |
|
|||
|
|
| contentColor2 | String | 第二条进度条颜色，支持渐变 | 否 |
|
|||
|
|
| minWidth | String | 进度条最小长度，避免所占百分比过小，文字展示不全，支持 px,rpx,vw,rem | 否 |
|
|||
|
|
| textSize | String | 文字大小，支持 px,rpx,vw,rem | 否 |
|
|||
|
|
| textColor | String | 文字颜色 | 否 |
|
|||
|
|
| textPosition | String | 文字显示位置，可选：inside/outside/none，默认 inside | 否 |
|
|||
|
|
| percentum | Boolean | 展示百分比，默认为 false | 否 |
|
|||
|
|
| precision | String/Number | 展示百分比时，精确到小数点后几位，默认为 2 | 否 |
|
|||
|
|
| animation | Boolean | 使用动画加载，默认为 false | 否 |
|