GovUI

Steps 步骤条 ​

显示某系列步骤流程。

基础用法 ​

控制台
active: 2
查看代码
vue
<template>
	<demo-container>
		<gov-steps :active="active">
			<gov-step title="步骤一" description="第一个步骤很重要" />
			<gov-step title="步骤二" description="第二个步骤很重要" />
			<gov-step title="步骤三" description="第三个步骤很重要" />
		</gov-steps>
		<br />
		<gov-button @click="active === 3 ? (active = 1) : active++">
			下一步
		</gov-button>
		<template #console>active: {{ active }}</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const active = ref(2);
</script>

不同尺寸 ​

控制台
 active: 1
 size: default
 center: true
查看代码
vue
<template>
	<demo-container>
		<div>
			<gov-radio-group button v-model="size">
				<gov-radio value="large">大尺寸</gov-radio>
				<gov-radio value="default">默认尺寸</gov-radio>
				<gov-radio value="small">小尺寸</gov-radio>
			</gov-radio-group>
			&nbsp;
			<gov-checkbox v-model="center">是否居中</gov-checkbox>
			<gov-button @click="active === 3 ? (active = 1) : active++">
				下一步
			</gov-button>
		</div>
		<hr />
		<gov-steps :active="active" :size="size" :center="center">
			<gov-step title="步骤一" description="第一个步骤很重要" />
			<gov-step title="步骤二" description="第二个步骤很重要" />
			<gov-step title="步骤三" description="第三个步骤很重要" />
		</gov-steps>
		<template #console>
			active: {{ active }}<br />
			size: {{ size }}<br />
			center: {{ center }}
		</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const active = ref(1);
const size = ref("default");
const center = ref(true);
</script>

定义Icon ​

控制台
active: 1
查看代码
vue
<template>
	<demo-container>
		<gov-steps :active="active">
			<gov-step
				title="步骤一"
				description="第一个步骤很重要"
				icon="edit"
			/>
			<gov-step
				title="步骤二"
				description="第二个步骤很重要"
				icon="picture"
			/>
			<gov-step
				title="步骤三"
				description="第三个步骤很重要"
				icon="setting"
			/>
		</gov-steps>
		<br />
		<gov-button @click="active === 3 ? (active = 1) : active++">
			下一步
		</gov-button>
		<template #console>active: {{ active }}</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const active = ref(1);
</script>

居中显示 ​

控制台
active: 1
查看代码
vue
<template>
	<demo-container>
		<gov-steps :active="active" center>
			<gov-step title="步骤一" description="第一个步骤很重要" />
			<gov-step title="步骤二" description="第二个步骤很重要" />
			<gov-step title="步骤三" description="第三个步骤很重要" />
		</gov-steps>
		<br />
		<gov-button @click="active === 3 ? (active = 1) : active++">
			下一步
		</gov-button>
		<template #console>active: {{ active }}</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const active = ref(1);
</script>

自定义内容 ​

控制台
active: 2
查看代码
vue
<template>
	<demo-container>
		<gov-steps :active="active">
			<gov-step title="步骤一" description="">
				<template #icon="{ index }">{{ index }}</template>
				<template #title>自定义标题</template>
				<template #description="{ index, status }">
					<i>第{{ index }}个，状态{{ status }}</i>
				</template>
			</gov-step>
			<gov-step title="步骤二" description="第二个步骤很重要" />
			<gov-step title="步骤三" description="第三个步骤很重要" />
		</gov-steps>
		<br />
		<gov-button @click="active === 3 ? (active = 1) : active++">
			下一步
		</gov-button>
		<template #console>active: {{ active }}</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const active = ref(2);
</script>

Steps Attributes ​

属性名说明类型可选值默认值
active当前活动的步骤索引（从 1 开始）Number——
center步骤描述是否居中Booleantrue, falsefalse
size步骤条的大小String——

Step Attributes ​

属性名说明类型可选值默认值
title步骤标题String——
icon步骤图标名称String——
description步骤描述String——

Step Slots ​

插槽名说明作用域插槽内容
icon自定义步骤图标，提供了 index（步骤索引）和 status（步骤状态）作为作用域属性是—
title自定义步骤标题，提供了 index（步骤索引）和 status（步骤状态）作为作用域属性是—
description自定义步骤描述，提供了 index（步骤索引）和 status（步骤状态）作为作用域属性是—

Released under the MIT License.