uv-ui

# LineProgress 线形进度条

✈

组件名：uv-line-progress

点击下载&安装 (opens new window)

该组件是一个线形的进度条，通过参数配置进度，灵活操作当前进度。适用于某个任务的进度等场景。

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √ √ √

# 基本使用

  • 通过percentage设置当前的进度值，该值区间为0-100
  • 通过activeColor设置进度条的颜色
<template>
	<uv-line-progress :percentage="30" activeColor="#ff0000"></uv-line-progress>
</template>

# 不显示百分比

通过show-text属性配置是否显示进度条内百分值

<template>
	<uv-line-progress :percentage="30" :showText="false"></uv-line-progress>
</template>

# 自定义高度

通过height属性设置进度条高度

<template>
	<uv-line-progress :percentage="30" height="30"></uv-line-progress>
</template>

# 自定义样式(不支持安卓环境的nvue)

自定义的数值样式，需要将数值嵌套在默认插槽里

<template>
	<uv-line-progress :percentage="30">
		<text class="uv-percentage-slot">{{30}}%</text>
	</uv-line-progress>
</template>
<style lang="scss" scoped>
	.uv-percentage-slot {
		padding: 1px 5px;
		background-color: #f9ae3d;
		color: #fff;
		border-radius: 100px;
		font-size: 10px;
		margin-right: -5px;
	}
</style>

# 手动加减

通过percentage属性设置数值达到增减

温馨提示

使用uni上挂载的uv-ui内置方法，需要根据扩展配置 - JS工具库进行相应的配置，否则直接会报错！

<template>
	<view style="margin-top: 50px;">
		<uv-line-progress :percentage="percentage" />
		<view style="display: flex;margin-top: 100px;">
			<button @click="computedWidth('minus')">减少</button>
			<button @click="computedWidth('plus')">增加</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				percentage: 30,
			}
		},
		methods: {
			computedWidth(type) {
				if (type === 'plus') {
					this.percentage = uni.$uv.range(0, 100, this.percentage + 10)
				} else {
					this.percentage = uni.$uv.range(0, 100, this.percentage - 10)
				}
			}
		}
	}
</script>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# LineProgress Props

参数 说明 类型 默认值 可选值
activeColor 进度条激活部分的颜色 String #19be6b -
inactiveColor 进度条的底色，默认为灰色 String #ececec -
percentage 进度百分比，数值 String | Number 0 -
showText 是否在进度条内部显示百分比的值 Boolean true true | false
height 进度条的高度，默认单位px。eg：height="30rpx" String | Number 12 -
customStyle 自定义外部样式 Object - -

# LineProgress Slots

名称 说明
default 传入自定义的显示内容，将会覆盖默认显示的百分比值

← Badge 徽标数（数字角标） →