展示操作或任务的当前进度，比如上传文件，是一个线形的进度条。

基础功能

通过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 变量使用 文档