Tui-Plus3.0.0

Appearance

ProgressLine (线型进度条) ​

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

支持平台 ​

安卓ios鸿蒙web微信小程序
√√√√√

示例代码 ​

html
<template>
	<t-page main-class="p-30">
		<t-card main-class='mb-30' title="ProgressLine 线形进度条"
			sub-title='组件以直观的视觉方式展示进度百分比，支持自定义颜色、显示比例文本.'></t-card>
		<t-section title="操作" main-class="mb-30"></t-section>
		<t-row main-class="tdr tdp tdb mb-30">
			<t-button type="primary" main-class="mr-15 f" @click="increase">增加</t-button>
			<t-button type="warn" main-class="f" @click="reduce">减少</t-button>
		</t-row>
		<template v-if="area==1">
			<t-section title="基础功能+主题展示" main-class="mb-30"></t-section>
			<t-col main-class="tdr tdp tdb mb-30">
				<t-progress-line main-class="mb-25" :percent="percent" type="info"></t-progress-line>
				<t-progress-line main-class="mb-25 h-150 r-150" :percent="percent" type="success"></t-progress-line>
				<t-progress-line main-class="mb-25" :percent="percent" type="error"></t-progress-line>
				<t-progress-line main-class="mb-25" :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="显示百分比" main-class="mb-30"></t-section>
			<t-row main-class="faic tdp tdb">
				<t-progress-line main-class="f mr-10" :percent="percent" type="success"></t-progress-line>
				<t-text>{{percent}}%</t-text>
			</t-row>
		</template>
		<template v-if="area==3">
			<t-section title="显示百分比" main-class="mb-30"></t-section>
			<t-col>
				<t-progress-line main-class="mb-25 r-5" :showPercentage="true" :percent="percent"
					type="info"></t-progress-line>
				<t-progress-line main-class="mb-25 r-8" :showPercentage="true" :percent="percent"
					type="success"></t-progress-line>
				<t-progress-line main-class="mb-25 r-10" :showPercentage="true" :percent="percent"
					type="error"></t-progress-line>
				<t-progress-line main-class="mb-25 r-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="设置宽度" main-class="mb-30"></t-section>
			<t-col>
				<t-progress-line main-class="w-100 mb-25" :percent="percent" type="success"></t-progress-line>
				<t-progress-line main-class="w-200 mb-25" :percent="percent" type="error"></t-progress-line>
				<t-progress-line main-class="w-300 mb-25" :percent="percent" type="primary"></t-progress-line>
				<t-progress-line main-class="w-400" :percent="percent" type="warning"></t-progress-line>
			</t-col>
		</template>
		<template v-if="area==5">
			<t-section title="自定义颜色" main-class="mb-30"></t-section>
			<t-col>
				<t-progress-line activeColor="#19be6b" inactiveColor="#f56c6c" :percent="percent"
					type="success"></t-progress-line>
			</t-col>
		</template>
		<t-row main-class='fww tdb tdr tdp'>
			<t-button type="p" main-class="mrb-30" size="small" @click="area=1">基础功能+主题</t-button>
			<t-button type="e" main-class="mrb-30" size="small" @click="area=2">显示百分比</t-button>
			<t-button type="s" main-class="mrb-30" size="small" @click="area=3">显示百分比</t-button>
			<t-button type="w" main-class="mrb-30" size="small" @click="area=4">设置宽度</t-button>
			<t-button type="p" main-class="mrbs-30" size="small" @click="area=5">自定义颜色</t-button>
		</t-row>
	</t-page>
</template>
<script>
	export default {
		data() {
			return {
				percent: 50,
				area: 1
			};
		},
		methods: {
			increase() {
				this.percent = this.percent + 10
				if (this.percent > 100) this.percent = 100
			},
			reduce() {
				this.percent = this.percent - 10
				if (this.percent < 0) this.percent = 0
			}
		}
	}
</script>

属性 ​

名称类型默认值说明可选值
sizeStringmini组件尺寸large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
typeString""组件类型info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabledBooleanfalse组件是否禁用false, true
stopBooleanfalse是否阻止事件冒泡（Tui统一写法处理事件冒泡）false, true
hoverBooleantrue是否有点击效果false, true
pathString""点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。-
mainClassString""组件根节点的样式-
nativeClassString""组件根节点原生样式-
effectString"normal"组件显示主题normal(正常), dark(深色), light(浅色), plain(镂空)
inactiveColorString#ececec进度条未激活时的颜色
percentNumber1进度条的当前百分比
showPercentageBooleanfalse是否显示进度百分比
activeColorString``进度条激活时的颜色