Python私教张大鹏 Vue3整合AntDesignVue之Steps 步骤条

引导用户按照流程完成任务的导航条。

何时使用

当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。

案例：步骤条组件

核心代码：

<template>
  <a-steps
    :current="1"
    :items="[
      {
        title: 'Finished',
        description,
      },
      {
        title: 'In Progress',
        description,
        subTitle: 'Left 00:00:08',
      },
      {
        title: 'Waiting',
        description,
      },
    ]"
  ></a-steps>
</template>
<script lang="ts" setup>
const description = 'This is a description.';
</script>

vue3示例：

<script setup>
const description = '关于步骤的描述文本';
</script>
<template>
  <!--
  :current="1"：当前步骤，是从0开始的
  :items: 具体的步骤，是一个数组，数组元素支持如下属性
    title：标题
    subTitle：副标题
    description：描述
  -->
  <a-steps
      :current="1"
      :items="[
      {
        title: '已完成',
        description,
      },
      {
        title: '进行中',
        description,
        subTitle: '副标题',
      },
      {
        title: '待办事项',
        description,
      },
    ]"
  ></a-steps>
</template>

案例：小型步骤条

迷你版的步骤条，通过设置 <Steps size="small"> 启用.

核心代码：

<template>
  <a-steps
    :current="1"
    size="small"
    :items="[
      {
        title: 'Finished',
      },
      {
        title: 'In Progress',
      },
      {
        title: 'Waiting',
      },
    ]"
  ></a-steps>
</template>

如何实现：size="small"

vue3示例：

<script setup>
const description = '关于步骤的描述文本';
const items = [
  {
     
    title: '已完成',
    description,
  },
  {
     
    title: '进行中',
    description,
    subTitle: '副标题',
  },
  {
     
    title: '待办事项',
    description,
  },
]
</script>
<template>
  <a-steps :current="1" :items="items"/>
  <a-divider>小步骤条</a-divider>
  <a-steps :current="1" :items="items" size="small"/>
</template>

案例：带图标的步骤条

通过设置 Steps.Step 的 icon 属性，可以启用自定义图标。

核心代码：

<template>
  <a-steps :items="items"></a-steps>
</template>
<script lang="ts" setup>
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[];
</script>

第一步：导入图标

import {
    h } from 'vue';
import {
   
  UserOutlined,
  SolutionOutlined,
  LoadingOutlined,
  SmileOutlined,
} from '@ant-design/icons-vue';

第二步：渲染图标

{
   
  title: 'Verification',
  status: 'finish',
  icon: h(SolutionOutlined),
}

vue3示例：

<script setup>
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),
  },
]
</script>
<template>
  <div class="p-28 bg-indigo-50">
    <a-steps :current="1" :items="items"/>
  </div>
</template>

案例：步骤切换

通常配合内容及按钮使用，表示一个流程的处理进度。

核心代码：

<template>
  <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>
</template>
<script lang="ts" setup>
import {
      ref } from 'vue';
import {
      message } from 'ant-design-vue';
const current = ref<number>(0);
const next = () => {
     
  current.value++;