Tui Plus Vapor

Appearance

# t-progress-line

ProgressLine 线形进度

t-progress-line 组件介绍 ​

线型进度条组件可以直观地展示进度百分比，适用于多种场景，如加载指示器、任务完成度展示等。

t-progress-line 平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

t-progress-line 基础用法 ​

基础用法参考 demo/progress-line/progress-line.uvue，支持主题、百分比、宽度与自定义颜色配置。

vue
<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card class='mb-15'
				title="ProgressLine 线形进度条"
				sub-title='组件以直观的视觉方式展示进度百分比，支持自定义颜色、显示比例文本.'></t-card>
		<t-section title="操作"
				   class="mb-15"></t-section>
		<t-row class="r-10 p-10 mb-15">
			<t-button type="primary"
					  class="mr-7 f"
					  @click="increase">增加</t-button>
			<t-button type="warning"
					  class="f"
					  @click="reduce">减少</t-button>
		</t-row>
		<template v-if="area==1">
			<t-section title="基础功能+主题展示"
					   class="mb-15"></t-section>
			<t-col class="r-10 p-10 mb-15">
				<t-progress-line class="mb-12"
								 :percent="percent"
								 type="info"></t-progress-line>
				<t-progress-line class="mb-12 h-75 r-75"
								 :percent="percent"
								 type="success"></t-progress-line>
				<t-progress-line class="mb-12"
								 :percent="percent"
								 type="error"></t-progress-line>
				<t-progress-line class="mb-12"
								 :percent="percent"
								 type="primary"></t-progress-line>
				<t-progress-line :percent="percent"
								 type="warning"></t-progress-line>
			</t-col>
		</template>
		<template v-if="area==2">
			<t-section title="显示百分比"
					   class="mb-15"></t-section>
			<t-row class="faic">
				<t-progress-line class="f mr-5"
								 :percent="percent"
								 type="success"></t-progress-line>
				<t-text>{{percent}}%</t-text>
			</t-row>
		</template>
		<template v-if="area==3">
			<t-section title="显示百分比"
					   class="mb-15"></t-section>
			<t-col>
				<t-progress-line class="mb-12"
								 :showPercentage="true"
								 :percent="percent"
								 type="info"></t-progress-line>
				<t-progress-line class="mb-12"
								 :showPercentage="true"
								 :percent="percent"
								 type="success"></t-progress-line>
				<t-progress-line class="mb-12"
								 :showPercentage="true"
								 :percent="percent"
								 type="error"></t-progress-line>
				<t-progress-line class="mb-12"
								 :showPercentage="true"
								 :percent="percent"
								 type="primary"></t-progress-line>
				<t-progress-line :showPercentage="true"
								 :percent="percent"
								 type="warning"></t-progress-line>
			</t-col>
		</template>
		<template v-if="area==4">
			<t-section title="设置宽度"
					   class="mb-15"></t-section>
			<t-col>
				<t-progress-line class="w-50 mb-12"
								 :percent="percent"
								 type="success"></t-progress-line>
				<t-progress-line class="w-100 mb-12"
								 :percent="percent"
								 type="error"></t-progress-line>
				<t-progress-line class="w-150 mb-12"
								 :percent="percent"
								 type="primary"></t-progress-line>
				<t-progress-line class="w-200"
								 :percent="percent"
								 type="warning"></t-progress-line>
			</t-col>
		</template>
		<template v-if="area==5">
			<t-section title="自定义颜色"
					   class="mb-15"></t-section>
			<t-col>
				<t-progress-line activeColor="#19be6b"
								 :percent="percent"
								 type="success"></t-progress-line>
			</t-col>
		</template>
		<t-row class='fww r-10 p-10'>
			<t-button type="success"
					  class="mrb-15"
					  size="small"
					  @click="area=1">基础功能+主题</t-button>
			<t-button type="error"
					  class="mrb-15"
					  size="small"
					  @click="area=2">显示百分比</t-button>
			<t-button type="primary"
					  class="mrb-15"
					  size="small"
					  @click="area=3">显示百分比</t-button>
			<t-button type="warning"
					  class="mrb-15"
					  size="small"
					  @click="area=4">设置宽度</t-button>
			<t-button type="primary"
					  class="mrbs-15"
					  size="small"
					  @click="area=5">自定义颜色</t-button>
		</t-row>
	</view>
</template>

<script setup
		lang="ts">
	// 引入 ref
	import { ref } from 'vue';

	// 定义响应式数据
	const percent = ref<number>(50);
	const area = ref<number>(1);

	// 定义方法
	const increase = () => {
		percent.value = percent.value + 10;
		if (percent.value > 100) percent.value = 100;
	};

	const reduce = () => {
		percent.value = percent.value - 10;
		if (percent.value < 0) percent.value = 0;
	};
</script>

t-progress-line Props ​

属性名类型默认值说明可选值
sizeString"medium"组件尺寸large, medium, small, mini
typeString""组件类型info, primary, error, warning, success
disabledBooleanfalse组件是否禁用true, false
hoverBooleanfalse是否有点击效果true, false
pathString""点击组件后跳转的页面路径-
effectString"normal"组件显示主题normal, dark, light, plain
percentNumber0进度条的当前百分比0-100
showPercentageBooleanfalse是否显示进度百分比true, false
activeColorString""进度条激活时的颜色-

t-progress-line Events ​

事件名说明回调参数
click点击时触发-
transitionend动画结束时触发-
initFinished组件初始化完成触发组件的节点信息
touchstart触摸开始时触发触摸事件对象
touchend触摸结束时触发触摸事件对象
touchmove触摸移动时触发触摸事件对象
touchcancel触摸取消时触发触摸事件对象