# 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											| 否		|