# LineProgress 线形进度条 
展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。
# 基本使用
- 通过
percentage设置当前的进度值，该值区间为0-100. - 通过
activeColor设置进度条的颜色
<template> <un-line-progress :percentage="30" activeColor="#ff0000" inactiveColor="#f5f5f5"></un-line-progress> </template>✅ Copy success!
# 不显示百分比
不显示百分比值信息
show-text参数配置是否显示进度条内百分值
<template> <un-line-progress :percentage="30" :showText="false" inactiveColor="#f5f5f5"></un-line-progress> </template>✅ Copy success!
# 自定义高度
height进度条高度
<template> <un-line-progress :percentage="30" height="8" inactiveColor="#f5f5f5"></un-line-progress> </template>✅ Copy success!
# 自定义样式(不支持安卓环境的nvue)
- 自定义的数值样式嵌套在默认插槽里
<template> <un-line-progress :percentage="30" inactiveColor="#f5f5f5"> <text class="u-percentage-slot">{{30}}%</text> </un-line-progress> </template> <style lang="css" scoped> .u-percentage-slot { padding: 1px 5px; background-color: #ff9900; color: #fff; border-radius: 100px; font-size: 10px; margin-right: -5px; } </style>✅ Copy success!
# 手动加减
- 通过控制
percentage参数数值达到增减
<template> <view style="margin-top: 50px;"> <un-line-progress :percentage="percentage" inactiveColor="#f5f5f5" /> <view style="display: flex;margin-top: 100px;"> <button @click="computedWidth('minus')">减少</button> <button @click="computedWidth('plus')">增加</button> </view> </view> </template> <script setup lang="ts"> import { ref } from 'vue' const percentage = ref(30) const computedWidth = (type: string) => { if(type === 'plus') { percentage.value = uni.$u.range(0, 100, percentage.value + 10) } else { percentage.value = uni.$u.range(0, 100, percentage.value - 10) } } </script>✅ Copy success!
# API
# Props
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| activeColor | 进度条激活部分的颜色 | string | #19be6b | - |
| inactiveColor | 进度条的底色，默认为灰色 | string | #ececec | - |
| percentage | 进度百分比，数值 | string | number | 0 | - |
| showText | 是否在进度条内部显示百分比的值 | boolean | true | false |
| height | 进度条的高度，默认单位px | string | number | 12 | - |
# Slots
| 名称 | 说明 |
|---|---|
| default | 传入自定义的显示内容，将会覆盖默认显示的百分比值 |