Steps 步骤条

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="步骤条">
		<!-- 基础用法 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" />
			<zk-steps :steps="basicSteps" :current="current" />
			<view class="demo-buttons">
				<zk-button text="上一步" size="small" :disabled="current <= 0" @click="prev" />
				<zk-button text="下一步" size="small" :disabled="current >= 2" @click="next" />
			</view>
		</zk-theme>

		<!-- 两步流程 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="两步流程" />
			<zk-steps :steps="basicSteps2" :current="current" />
		</zk-theme>

		<!-- 多步流程 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="多步流程" />
			<zk-steps :steps="basicSteps3" :current="current" />
		</zk-theme>

		<!-- 自定义图标 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义图标" />
			<zk-steps :steps="iconSteps" :current="1" />
		</zk-theme>

		<!-- 订单流程 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="订单流程" />
			<zk-steps :steps="orderSteps" :current="2" />
		</zk-theme>

		<!-- 注册流程 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="注册流程" />
			<zk-steps :steps="registerSteps" :current="1" />
		</zk-theme>

		<!-- 垂直方向-物流信息 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="物流信息" />
			<zk-steps direction="vertical" :steps="logisticsSteps" :current="0" />
		</zk-theme>
	</zk-theme>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				// 基础步骤
				basicSteps: [{
						title: '步骤1',
						description: '这是步骤1的描述'
					},
					{
						title: '步骤2',
						description: '这是步骤2的描述'
					},
					{
						title: '步骤3',
						description: '这是步骤3的描述'
					}
				],
				basicSteps3: [{
						title: '步骤1',
						description: '这是步骤1的描述'
					},
					{
						title: '步骤2',
						description: '这是步骤2的描述'
					},
					{
						title: '步骤3',
						description: '这是步骤3的描述'
					},
					{
						title: '步骤4',
						description: '这是步骤4的描述'
					},
					{
						title: '步骤5',
						description: '这是步骤5的描述'
					}
				],
				basicSteps2: [{
						title: '步骤1',
						description: '这是步骤1的描述'
					},
					{
						title: '步骤2',
						description: '这是步骤2的描述'
					}
				],
				// 自定义图标
				iconSteps: [{
						title: '登录',
						icon: 'user-line'
					},
					{
						title: '验证',
						icon: 'lock-line'
					},
					{
						title: '完成',
						icon: 'check-line'
					}
				],
				// 订单流程
				orderSteps: [{
						title: '下单',

						icon: 'shopping-cart-2-line'
					},
					{
						title: '付款',

						icon: 'wallet-line'
					},
					{
						title: '发货',

						icon: 'exchange-line'
					},
					{
						title: '收货',

						icon: 'truck-line'
					}
				],
				// 注册流程
				registerSteps: [{
						title: '填写信息',
						description: '填写基本信息'
					},
					{
						title: '验证手机',
						description: '验证手机号码'
					},
					{
						title: '设置密码',
						description: '设置登录密码'
					},
					{
						title: '完成注册',
						description: '注册完成'
					}
				],
				// 物流信息
				logisticsSteps: [{
						title: '运输中',
						description: '[杭州市] 快件已到达杭州转运中心'
					},
					{
						title: '运输中',
						description: '[金华市] 快件已从金华发出'
					},
					{
						title: '已揽收',
						description: '[义乌市] 快递员已揽收'
					},
					{
						title: '已下单',
						description: '卖家已发货'
					}
				]
			}
		},

		methods: {
			prev() {
				if (this.current > 0) {
					this.current--
				}
			},
			next() {
				if (this.current < 2) {
					this.current++
				}
			}
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	.demo-buttons {
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 20rpx;
	}

	/* #endif */

	/* #ifdef APP-NVUE */
	.demo-buttons {
		margin-top: 30rpx;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		.zk-button {
			margin-right: 20rpx;

			&:last-child {
				margin-right: 0;
			}
		}
	}

	/* #endif */
</style>