ProgressLine 线型进度条

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

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title='进度条-线型' class="p.30">
		<t-card class='mb.30' title="ProgressLine 线形进度条"
			sub-title='组件以直观的视觉方式展示进度百分比，支持自定义颜色、显示比例文本，并通过计算属性智能适应容器宽度，实现高度灵活的进度展示。'></t-card>

		<t-section title="操作" class="mb.30"></t-section>
		<t-row class="tdr-tdp-tdb-mb.30">
			<button size="mini" type="primary" style="margin-right: 15rpx;" @click="increase">增加</button>
			<button size="mini" type="warn" @click="reduce">减少</button>
		</t-row>
		<template v-if="area==1">
			<t-section title="基础功能+主题展示" class="mb.30"></t-section>
			<t-col class="tdr-tdp-tdb-mb.30">
				<t-progress-line class="mb.25" :percent="percent" type="info"></t-progress-line>
				<t-progress-line class="mb.25" :percent="percent" type="success"></t-progress-line>
				<t-progress-line class="mb.25" :percent="percent" type="error"></t-progress-line>
				<t-progress-line 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="显示百分比" class="mb.30"></t-section>
			<t-row class="faic">
				<t-progress-line class="ff-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="设置样式" class="mb.30"></t-section>
			<t-col>
				<t-progress-line class="mb.25-r.5" :showPercentage="true" :percent="percent"
					type="info"></t-progress-line>
				<t-progress-line class="mb.25-r.8" :showPercentage="true" :percent="percent"
					type="success"></t-progress-line>
				<t-progress-line class="mb.25-r.10" :showPercentage="true" :percent="percent"
					type="error"></t-progress-line>
				<t-progress-line 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="设置宽度" class="mb.30"></t-section>
			<t-col>
				<t-progress-line class="w.100-mb.25" :percent="percent" type="success"></t-progress-line>
				<t-progress-line class="w.200-mb.25" :percent="percent" type="error"></t-progress-line>
				<t-progress-line class="w.300-mb.25" :percent="percent" type="primary"></t-progress-line>
				<t-progress-line class="w.400" :percent="percent" type="warning"></t-progress-line>
			</t-col>
		</template>
		<template v-if="area==5">
			<t-section title="自定义颜色" 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 class='ffww-tdb-tdr-tdp'>
			<t-button type="p" class="mrb.30" size="small" @click="area=1">基础功能+主题</t-button>
			<t-button type="e" class="mrb.30" size="small" @click="area=2">显示百分比</t-button>
			<t-button type="s" class="mrb.30" size="small" @click="area=3">设置样式</t-button>
			<t-button type="w" class="mrb.30" size="small" @click="area=4">设置宽度</t-button>
			<t-button type="p" 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>

Props

名称	描述	类型	默认值
percent	进度条的当前百分比	Number	0
showPercentage	是否显示进度百分比文本	Boolean	false
activeColor	进度条激活时的颜色	String	''
inactiveColor	进度条未激活时的颜色	String	'#ececec'