外观
LineProgress 线形进度条
约 724 字大约 2 分钟
2025-10-31
展示操作或任务的当前进度,比如上传文件,是一个线形的进度条。
基础功能
通过value设置当前的进度值,该值区间为0-100。
<template>
<un-line-progress :value="percentage1"></un-line-progress>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const percentage1 = ref(30)
</script>不显示百分比
通过showText参数配置是否显示进度条内的百分比值。
<template>
<un-line-progress :showText="false" :value="percentage2"></un-line-progress>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const percentage2 = ref(40)
</script>自定义高度
使用height参数设置进度条的高度。
<template>
<un-line-progress height="8" :showText="false" :value="percentage3"></un-line-progress>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const percentage3 = ref(50)
</script>自定义颜色
通过activeColor和inactiveColor参数自定义进度条的颜色。
<template>
<un-line-progress
height="8"
:showText="false"
:value="percentage4"
activeColor="#ff6b6b"
inactiveColor="#ffe0e0"
></un-line-progress>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const percentage4 = ref(60)
</script>自定义样式
通过默认插槽自定义进度条内部的显示内容,将会覆盖默认显示的百分比值。
<template>
<un-line-progress
height="8"
:showText="false"
:value="percentage5"
activeColor="#3c9cff"
inactiveColor="#f3f4f6"
>
<text class="u-percentage-slot">{{ percentage5 }}%</text>
</un-line-progress>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const percentage5 = ref(70)
</script>
<style lang="scss" scoped>
.u-percentage-slot {
padding: 1px 5px;
background-color: #f9ae3d;
color: #fff;
border-radius: 100px;
font-size: 10px;
margin-right: -5px;
}
</style>手动加减
通过外部事件动态控制进度条的进度值。
<template>
<un-line-progress
height="8"
:showText="false"
:value="percentage6"
activeColor="#3c9cff"
inactiveColor="#f3f4f6"
>
</un-line-progress>
<view class="button-group">
<view class="button-group__circle" hover-class="u-hover-class" @click="computedWidth('minus')">
<text class="button-group__circle__text">减少</text>
</view>
<view class="button-group__circle" hover-class="u-hover-class" @click="computedWidth('plus')">
<text class="button-group__circle__text">增加</text>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { range } from '@/uni_modules/uview-unix'
const percentage6 = ref(40)
const computedWidth = (type: string) => {
if (type == 'plus') {
percentage6.value = range(0, 100, percentage6.value + 10)
} else {
percentage6.value = range(0, 100, percentage6.value - 10)
}
}
</script>
<style lang="scss" scoped>
.button-group {
display: flex;
flex-direction: row;
justify-content: center;
&__circle {
width: 50px;
height: 50px;
background-color: #dbfbdb;
border-radius: 100px;
justify-content: center;
align-items: center;
margin: 30px 30px;
&__text {
color: rgb(25, 190, 107);
font-size: 13px;
}
}
}
</style>API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| activeColor | 进度条激活部分的颜色 | string | #19be6b |
| inactiveColor | 进度条的底色,默认为灰色 | string | #ececec |
| value | 进度百分比,数值 | string | number | 0 |
| showText | 是否在进度条内部显示百分比的值 | boolean | true |
| height | 进度条的高度,默认单位px | string | number | 12 |
Slots
| 名称 | 说明 |
|---|---|
| default | 传入自定义的显示内容,将会覆盖默认显示的百分比值 |
Scss 变量
| 变量名 | 默认值 | 说明 |
|---|---|---|
| $un-line-progress-height | 12px | 进度条高度 |
| $un-line-progress-border-radius | 6px | 进度条圆角 |
| $un-line-progress-text-font-size | 12px | 进度条文字大小 |
| $un-line-progress-text-color | #FFFFFF | 进度条文字颜色 |
| $un-line-progress-text-padding | 0 6px | 进度条文字内边距 |
提示
组件内部默认使用 scss 变量,如需修改,请查看 scss 变量使用 文档
