T-UVUE-UI1.0.0

Appearance

Steps 步骤条 ​

步骤条组件，用于创建一个显示步骤进度的条形组件，支持配置步骤类型、方向、当前步骤、激活状态文字颜色、激活图标、未激活状态文字颜色等。

支持平台 ​

安卓iosweb微信小程序支付宝小程序QQ小程序
√√√xxx

示例 ​

html
<template>
	<t-page class='p.30' title="步骤条">
		<t-card class="tdr-tdb-mb.30" title="Steps 步骤条" v-once sub-title="展示操作流程的步骤进度，引导用户按步骤完成任务"></t-card>
		<t-button type='p' class="mb.30" @click="updtateState">修改状态</t-button>
		<t-steps class="tdr-tdb-mb.30" lineClass="h.2px" :current="current">
			<t-steps-item title="待付款" time="10:30"></t-steps-item>
			<t-steps-item title="待发货" time="11:35"></t-steps-item>
			<t-steps-item class="ff" title="待签收" time="10:40" desc="其它内容"></t-steps-item>
			<t-steps-item title="待评价" time="12:30"></t-steps-item>
		</t-steps>
		<t-section class="mb.30-tdr-tdb" title='显示索引+插槽展示+设置主题+修改图标+状态' type='error' v-once></t-section>
		<t-steps class="tdr-tdb-mb.30" lineClass="h.2px" :current="2" active-icon="bell" type="s">
			<t-steps-item title="待付款" time="10:30"></t-steps-item>
			<t-steps-item title="待发货" time="11:35" type='e' activeIcon="close" activeIconClass="s.18">
				<t-text type='e'>缺货</t-text>
			</t-steps-item>
			<t-steps-item class="ff" title="待签收" time="10:40" desc="其它内容"></t-steps-item>
			<t-steps-item title="待评价" time="12:30"></t-steps-item>
		</t-steps>
		<t-section class="mb.30-tdr-tdb" title='纵向排列' type='error' v-once></t-section>
		<t-steps class="tdr-tdb-mb.30" lineClass="h.2px" :current="2" active-icon="bell" type="s"
			direction="col">
			<t-steps-item title="待付款" time="10:30"></t-steps-item>
			<t-steps-item title="待发货" time="11:35" type='e' activeIcon="close" activeIconClass="s.18">
				<t-text type='e'>缺货</t-text>
			</t-steps-item>
			<t-steps-item class="ff" title="待签收" time="10:40" desc="其它内容"></t-steps-item>
			<t-steps-item title="待评价" time="12:30"></t-steps-item>
		</t-steps>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {
				current: 0
			}
		},
		methods: {
			updtateState() {
				if (this.current == 3) {
					this.current = 0
				} else {
					this.current++
				}
			}
		}
	}
</script>

t-steps Props ​

名称描述类型默认值可选值
type步骤类型String'p'-
direction步骤方向String'row''row', 'column'
current当前步骤Number2-
activeColor激活状态文字颜色String''-
activeIcon激活图标名称String'checkbox-mark'-
activeIconClass激活图标的类名String''-
barClass步骤条的类名String''-
indexClass步骤索引的类名String''-
inactiveColor未激活状态文字颜色String'#afafaf'-
lineClass步骤线条的类名String''-
showIndex是否显示步骤索引Booleantrue-

t-steps-item Props ​

名称描述类型默认值可选值
title标题文本String''-
time时间文本String''-
desc描述文本String''-
titleClass标题的类名String''-
timeClass时间的类名String''-
descClass描述的类名String''-
type步骤类型String'p'-
activeColor激活状态文字颜色String''-
inactiveColor未激活状态文字颜色String'#909399'-
activeIcon激活图标名称String''-
activeIconClass激活图标的类名String''-
barClass步骤条的类名String''-
indexClass步骤索引的类名String''-
lineClass步骤线条的类名String''-
showIndex是否显示步骤索引Booleantrue-