Python私教张大鹏 Vue3整合AntDesignVue之Steps 步骤条
引导用户按照流程完成任务的导航条。
何时使用
当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。
案例：步骤条组件
核心代码：
<a-steps
:current="1"
:items="[
{
title: 'Finished',
description,
},
{
title: 'In Progress',
description,
subTitle: 'Left 00:00:08',
},
{
title: 'Waiting',
description,
},
]"
></a-steps>
const description = 'This is a description.';
vue3示例：
const description = '关于步骤的描述文本';
<!--
:current="1"：当前步骤，是从0开始的
:items: 具体的步骤，是一个数组，数组元素支持如下属性
title：标题
subTitle：副标题
description：描述
-->
<a-steps
:current="1"
:items="[
{
title: '已完成',
description,
},
{
title: '进行中',
description,
subTitle: '副标题',
},
{
title: '待办事项',
description,
},
]"
></a-steps>
在这里插入图片描述案例：小型步骤条
迷你版的步骤条，通过设置 启用.
核心代码：
<a-steps
:current="1"
size="small"
:items="[
{
title: 'Finished',
},
{
title: 'In Progress',
},
{
title: 'Waiting',
},
]"
></a-steps>
如何实现：size="small"
vue3示例：
const description = '关于步骤的描述文本';
const items = [
{
title: '已完成',
description,
},
{
title: '进行中',
description,
subTitle: '副标题',
},
{
title: '待办事项',
description,
},
]
<a-steps :current="1" :items="items"/>
<a-divider>小步骤条</a-divider>
<a-steps :current="1" :items="items" size="small"/>
在这里插入图片描述案例：带图标的步骤条
通过设置 Steps.Step 的 icon 属性，可以启用自定义图标。
核心代码：
<a-steps :items="items"></a-steps>
import { h } from 'vue';
import {
UserOutlined,
SolutionOutlined,
LoadingOutlined,
SmileOutlined,
} from '@ant-design/icons-vue';
import { StepProps } from 'ant-design-vue';
const items = [
{
title: 'Login',
status: 'finish',
icon: h(UserOutlined),
},
{
title: 'Verification',
status: 'finish',
icon: h(SolutionOutlined),
},
{
title: 'Pay',
status: 'process',
icon: h(LoadingOutlined),
},
{
title: 'Done',
status: 'wait',
icon: h(SmileOutlined),
},
] as StepProps[];
第一步：导入图标
import { h } from 'vue';
import {
UserOutlined,
SolutionOutlined,
LoadingOutlined,
SmileOutlined,
} from '@ant-design/icons-vue';
第二步：渲染图标
{
title: 'Verification',
status: 'finish',
icon: h(SolutionOutlined),
}
vue3示例：
import { h } from 'vue';
import {
UserOutlined,
SolutionOutlined,
LoadingOutlined,
SmileOutlined,
} from '@ant-design/icons-vue';
const description = '关于步骤的描述文本';
const items = [
{
title: '已完成',
description,
icon: h(UserOutlined),
},
{
title: '进行中',
description,
subTitle: '副标题',
icon: h(SolutionOutlined),
},
{
title: '待办事项',
description,
icon: h(LoadingOutlined),
},
]
<div class="p-28 bg-indigo-50">
<a-steps :current="1" :items="items"/>
</div>
在这里插入图片描述案例：步骤切换
通常配合内容及按钮使用，表示一个流程的处理进度。
核心代码：
<div>
<a-steps :current="current" :items="items"></a-steps>
<div class="steps-content">
{{ steps[current].content }}
</div>
<div class="steps-action">
<a-button v-if="current < steps.length - 1" type="primary" @click="next">Next</a-button>
<a-button
v-if="current == steps.length - 1"
type="primary"
@click="message.success('Processing complete!')"
>
Done
</a-button>
<a-button v-if="current > 0" style="margin-left: 8px" @click="prev">Previous</a-button>
</div>
</div>
import { ref } from 'vue';
import { message } from 'ant-design-vue';
const current = ref<number>(0);
const next = () => {
current.value++;
};
const prev = () => {
current.value--;
};
const steps = [
{
title: 'First',
content: 'First-content',
},
{
title: 'Second',
content: 'Second-content',
},
{
title: 'Last',
content: 'Last-content',
},
];
const items = steps.map(item => ({ key: item.title, title: item.title }));
.steps-content {
margin-top: 16px;
border: 1px dashed #e9e9e9;
border-radius: 6px;
background-color: #fafafa;
min-height: 200px;
text-align: center;
padding-top: 80px;
}
.steps-action {
margin-top: 24px;
}
[data-theme='dark'] .steps-content {
background-color: #2f2f2f;
border: 1px dashed #404040;
}
第一步：绑定当前步骤 :current="current"
第二步：展示步骤内容
{{ steps[current].content }}
第三步：展示切换内容
<a-button v-if="current < steps.length - 1" type="primary" @click="next">Next</a-button>
<a-button
v-if="current == steps.length - 1"
type="primary"
@click="message.success('Processing complete!')"
>
Done
</a-button>
<a-button v-if="current > 0" style="margin-left: 8px" @click="prev">Previous</a-button>
第四步：编写切换方法
import { message } from 'ant-design-vue';
const current = ref<number>(0);
const next = () => {
current.value++;
};
const prev = () => {
current.value--;
};
vue3示例：
import {h, ref} from 'vue';
import {
UserOutlined,
SolutionOutlined,
LoadingOutlined,
SmileOutlined,
} from '@ant-design/icons-vue';
const current = ref(0)
const description = '关于步骤的描述文本';
const items = [
{
title: '已完成',
description,
icon: h(UserOutlined),
},
{
title: '进行中',
description,
subTitle: '副标题',
icon: h(SolutionOutlined),
},
{
title: '待办事项',
description,
icon: h(LoadingOutlined),
},
]
<div class="p-28 bg-indigo-50">
<a-steps :current="current" :items="items"/>
<div class="container bg-red-300 mt-3 min-h-72 p-3">
{{items[current].title}}
</div>
<div class="container bg-red-300 mt-3 p-3">
<a-button type="primary" @click="current--">上一步</a-button>
<a-button type="primary" @click="current++">下一步</a-button>
</div>
</div>
在这里插入图片描述案例：垂直步骤条
核心代码：
<a-steps
direction="vertical"
:current="1"
:items="[
{
title: 'Finished',
description,
},
{
title: 'In Progress',
description,
},
{
title: 'Waiting',
description,
},
]"
></a-steps>
const description = 'This is a description.';
如何实现：direction="vertical"
vue3示例：
import {h, ref} from 'vue';
import {
UserOutlined,
SolutionOutlined,
LoadingOutlined,
SmileOutlined,
} from '@ant-design/icons-vue';
const current = ref(0)
const description = '关于步骤的描述文本';
const items = [
{
title: '已完成',
description,
icon: h(UserOutlined),
},
{
title: '进行中',
description,
subTitle: '副标题',
icon: h(SolutionOutlined),
},
{
title: '待办事项',
description,
icon: h(LoadingOutlined),
},
]
<div class="p-28 bg-indigo-50">
<a-steps :current="current" :items="items" direction="vertical"/>
<div class="container bg-red-300 mt-3 min-h-72 p-3">
{{items[current].title}}
</div>
<div class="container bg-red-300 mt-3 p-3">
<a-button type="primary" @click="current--">上一步</a-button>
<a-button type="primary" @click="current++">下一步</a-button>
</div>
</div>
在这里插入图片描述案例：步骤运行错误
使用 Steps 的 status 属性来指定当前步骤的状态。
核心代码：
<a-steps
v-model:current="current"
status="error"
:items="[
{
title: 'Finished',
description,
},
{
title: 'In Process',
description,
},
{
title: 'Waiting',
description,
},
]"
></a-steps>
import { ref } from 'vue';
const current = ref<number>(1);
const description = 'This is a description.';
如何实现：status="error"
vue3示例：
import {h, ref} from 'vue';
import {
UserOutlined,
SolutionOutlined,
LoadingOutlined,
SmileOutlined,
} from '@ant-design/icons-vue';
const current = ref(0)
const description = '关于步骤的描述文本';
const items = [
{
title: '已完成',
description,
icon: h(UserOutlined),
},
{
title: '进行中',
description,
subTitle: '副标题',
icon: h(SolutionOutlined),
},
{
title: '待办事项',
description,
icon: h(LoadingOutlined),
},
]
<div class="p-28 bg-indigo-50">
<a-steps :current="current" :items="items" direction="vertical" status="error"/>
<div class="container bg-red-300 mt-3 min-h-72 p-3">
{{items[current].title}}
</div>
<div class="container bg-red-300 mt-3 p-3">
<a-button type="primary" @click="current--">上一步</a-button>
<a-button type="primary" @click="current++">下一步</a-button>
</div>
</div>
在这里插入图片描述案例：点状步骤条
包含步骤点的进度条。
核心代码：
<div>
<a-steps
progress-dot
:current="1"
:items="[
{
title: 'Finished',
description: 'This is a description.',
},
{
title: 'In Progress',
description: 'This is a description.',
},
{
title: 'Waiting',
description: 'This is a description.',
},
]"
></a-steps>
<a-divider />
<a-steps
progress-dot
:current="1"
direction="vertical"
:items="[
{
title: 'Finished',
description: 'This is a description. This is a description.',
},
{
title: 'Finished',
description: 'This is a description. This is a description.',
},
{
title: 'In Progress',
description: 'This is a description. This is a description.',
},
{
title: 'Waiting',
description: 'This is a description.',
},
{
title: 'Waiting',
description: 'This is a description.',
},
]"
></a-steps>
</div>
如何实现：progress-dot
vue3示例：
import {h, ref} from 'vue';
const current = ref(0)
const description = '关于步骤的描述文本';
const items = [
{
title: '已完成',
description,
},
{
title: '进行中',
description,
subTitle: '副标题',
},
{
title: '待办事项',
description,
},
]
<div class="p-28 bg-indigo-50">
<a-steps :current="current" :items="items" direction="vertical" status="error" progress-dot/>
<div class="container bg-red-300 mt-3 min-h-72 p-3">
{{items[current].title}}
</div>
<div class="container bg-red-300 mt-3 p-3">
<a-button type="primary" @click="current--">上一步</a-button>
<a-button type="primary" @click="current++">下一步</a-button>
</div>
</div>
在这里插入图片描述案例：步骤可点击
设置 v-model 后，Steps 变为可点击状态。
核心代码：
<div>
<a-steps
v-model:current="current"
:items="[
{
title: 'Step 1',
description,
},
{
title: 'Step 2',
description,
},
{
title: 'Step 3',
description,
},
]"
></a-steps>
<a-divider />
<a-steps
v-model:current="current"
direction="vertical"
:items="[
{
title: 'Step 1',
description,
},
{
title: 'Step 2',
description,
},
{
title: 'Step 3',
description,
},
]"
></a-steps>
</div>
import { ref } from 'vue';
const current = ref<number>(0);
const description = 'This is a description.';
如何实现：v-model:current="current"
vue3示例：
import {h, ref} from 'vue';
const current = ref(0)
const description = '关于步骤的描述文本';
const items = [
{
title: '已完成',
description,
},
{
title: '进行中',
description,
subTitle: '副标题',
},
{
title: '待办事项',
description,
},
]
<div class="p-28 bg-indigo-50">
<a-steps v-model:current="current" :items="items" status="error" progress-dot/>
<div class="container bg-red-300 mt-3 min-h-72 p-3">
{{items[current].title}}
</div>
<div class="container bg-red-300 mt-3 p-3">
<a-button type="primary" @click="current--">上一步</a-button>
<a-button type="primary" @click="current++">下一步</a-button>
</div>
</div>
在这里插入图片描述案例：导航步骤条
核心代码：
<div>
<a-steps
v-model:current="current"
type="navigation"
size="small"
:style="stepStyle"
:items="[
{
title: 'Step 1',
subTitle: '00:00:05',
status: 'finish',
description: 'This is a description.',
},
{
title: 'Step 2',
subTitle: '00:01:02',
status: 'process',
description: 'This is a description.',
},
{
title: 'Step 3',
subTitle: 'waiting for longlong time',
status: 'wait',
description: 'This is a description.',
},
]"
></a-steps>
<a-steps
v-model:current="current"
type="navigation"
:style="stepStyle"
:items="[
{
status: 'finish',
title: 'Step 1',
},
{
status: 'process',
title: 'Step 2',
},
{
status: 'wait',
title: 'Step 3',
},
{
status: 'wait',
title: 'Step 4',
},
]"
></a-steps>
<a-steps
v-model:current="current"
type="navigation"
size="small"
:style="stepStyle"
:items="[
{
status: 'finish',
title: 'finish 1',
},
{
status: 'finish',
title: 'finish 2',
},
{
status: 'process',
title: 'current process',
},
{
status: 'wait',
title: 'wait',
disabled: true,
},
]"
></a-steps>
</div>
import { ref } from 'vue';
const current = ref<number>(0);
const stepStyle = {
marginBottom: '60px',
boxShadow: '0px -1px 0 0 #e8e8e8 inset',
};
如何实现：type="navigation"
vue3示例：
import {h, ref} from 'vue';
const current = ref(0)
const description = '关于步骤的描述文本';
const items = [
{
title: '已完成',
description,
},
{
title: '进行中',
description,
subTitle: '副标题',
},
{
title: '待办事项',
description,
},
]
<div class="p-28 bg-indigo-50">
<a-steps v-model:current="current" :items="items" status="error"
progress-dot
type="navigation"/>
<div class="container bg-red-300 mt-3 min-h-72 p-3">
{{items[current].title}}
</div>
<div class="container bg-red-300 mt-3 p-3">
<a-button type="primary" @click="current--">上一步</a-button>
<a-button type="primary" @click="current++">下一步</a-button>
</div>
</div>
在这里插入图片描述案例：步骤条进度
核心代码：
<a-steps
v-model:current="current"
:percent="60"
:items="[
{
title: 'Finished',
description,
},
{
title: 'In Progress',
subTitle: 'Left 00:00:08',
description,
},
{
title: 'Waiting',
description,
},
]"
></a-steps>
<a-steps
v-model:current="current"
:percent="60"
size="small"
:items="[
{
title: 'Finished',
description,
},
{
title: 'In Progress',
subTitle: 'Left 00:00:08',
description,
},
{
title: 'Waiting',
description,
},
]"
></a-steps>
import { ref } from 'vue';
const current = ref<number>(1);
const description = 'This is a description.';
如何实现：:percent="60"
vue3示例：
import {h, ref} from 'vue';
const current = ref(0)
const description = '关于步骤的描述文本';
const items = [
{
title: '已完成',
description,
},
{
title: '进行中',
description,
subTitle: '副标题',
},
{
title: '待办事项',
description,
},
]
<div class="p-28 bg-indigo-50">
<a-steps v-model:current="current" :items="items"
:percent="88"
type="navigation"/>
<div class="container bg-red-300 mt-3 min-h-72 p-3">
{{items[current].title}}
</div>
<div class="container bg-red-300 mt-3 p-3">
<a-button type="primary" @click="current--">上一步</a-button>
<a-button type="primary" @click="current++">下一步</a-button>
</div>
</div>
在这里插入图片描述案例：标签位置
核心代码：
<div>
<a-steps :current="1" label-placement="vertical" :items="items" />
<br />
<a-steps :current="1" :percent="60" label-placement="vertical" :items="items" />
<br />
<a-steps :current="1" size="small" label-placement="vertical" :items="items" />
</div>
import { ref } from 'vue';
const items = ref([
{
title: 'Finished',
description: 'This is a description.',
},
{
title: 'In Progress',
description: 'This is a description.',
},
{
title: 'Waiting',
description: 'This is a description.',
},
]);
如何实现：label-placement="vertical"
vue3示例：
import {h, ref} from 'vue';
const current = ref(0)
const description = '关于步骤的描述文本';
const items = [
{
title: '已完成',
description,
},
{
title: '进行中',
description,
subTitle: '副标题',
},
{
title: '待办事项',
description,
},
]
<div class="p-28 bg-indigo-50">
<a-steps v-model:current="current" :items="items"
:percent="88"
label-placement="vertical"
type="navigation"/>
<div class="container bg-red-300 mt-3 min-h-72 p-3">
{{items[current].title}}
</div>
<div class="container bg-red-300 mt-3 p-3">
<a-button type="primary" @click="current--">上一步</a-button>
<a-button type="primary" @click="current++">下一步</a-button>
</div>
</div>
在这里插入图片描述案例：内联步骤条
内联类型的步骤条，适用于列表内容场景中展示对象所在流程、当前状态的情况。
核心代码：
<a-list :data-source="data">
<template #renderItem="{ item }">
<a-list-item>
<a-list-item-meta
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
>
<template #title>
<a href="https://www.antdv.com/">{{ item.title }}</a>
</template>
<template #avatar>
<a-avatar src="https://joeschmoe.io/api/v1/random" />
</template>
</a-list-item-meta>
<a-steps
style="margin-top: 8px"
type="inline"
:current="item.current"
:status="item.status"
:items="items"
/>
</a-list-item>
</template>
</a-list>
const data = [
{
title: 'Ant Design Title 1',
current: 0,
},
{
title: 'Ant Design Title 2',
current: 1,
status: 'error',
},
{
title: 'Ant Design Title 3',
current: 2,
},
{
title: 'Ant Design Title 4',
current: 1,
},
];
const items = [
{
title: 'Step 1',
description: 'This is a Step 1.',
},
{
title: 'Step 2',
description: 'This is a Step 2.',
},
{
title: 'Step 3',
description: 'This is a Step 3.',
},
];
属性
整体步骤条。
内嵌属性
type="inline" (4.0+)
事件
步骤属性
步骤条内的每一个步骤。
- 发表于:
- 原文链接：https://page.om.qq.com/page/OuCBS8X0l06efZIifV3xJyxw0
- 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号（企鹅号）传播渠道之一，根据《腾讯内容开放平台服务协议》转载发布内容。
- 如有侵权，请联系 cloudcommunity@tencent.com 删除。
相关快讯
扫码
添加站长 进交流群
领取专属 10元无门槛券
私享最新 技术干货
腾讯云开发者
