vue-weui

Appearance

Steps 步骤条 ​

Steps 步骤条常用于展示分步进行场景。

基础使用 ​

Steps 结合 StepItem 组件可以快速完成步骤条渲染

显示代码
vue
<template>
  <weui-steps v-model="activeStep">
    <weui-step-item :step="0" title="标题" desc="描述"></weui-step-item>
    <weui-step-item :step="1" title="标题" desc="描述"></weui-step-item>
    <weui-step-item :step="2" title="标题" desc="描述"></weui-step-item>
  </weui-steps>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const activeStep = ref(0);
</script>

显示icon的步骤条 ​

stepItem 组件通过指定 icon 属性可以让步骤显示icon，目前仅包含 waiting 和 success

显示代码
vue
<weui-steps v-model="activeStep">
  <weui-step-item :step="0" title="标题" desc="描述"></weui-step-item>
  <weui-step-item :step="1" title="标题" desc="描述"></weui-step-item>
  <weui-step-item :step="2" title="标题" desc="描述" icon="waiting"></weui-step-item>
</weui-steps>

横向步骤条 ​

通过 direction 属性可以指定步骤条方向，包括 horizontal 和 vertical

显示代码
vue
<weui-steps v-model="activeStep" direction="horizontal">
  <weui-step-item :step="0" title="标题" desc="描述"></weui-step-item>
  <weui-step-item :step="1" title="标题" desc="描述"></weui-step-item>
  <weui-step-item :step="2" title="标题" desc="描述" icon="waiting"></weui-step-item>
</weui-steps>

API ​

Steps Props ​

名称类型默认值说明版本
modelValuenumber0当前步骤-
direction'vertical' | 'horizontal'vertical步骤方向-

Steps Events ​

名称描述参数版本
change步骤值改变时触发(percent: number) => void-
update:modelValue步骤值改变时触发(step: number) => void-

StepItem Props ​

名称类型默认值说明版本
stepnumber0步骤值-
titlestring''标题文本，仅在 vertical 下显示-
descstring''描述文本，仅在 vertical 下显示-
icon'waiting' | 'success'-icon内容-

StepItem Slots ​

名称参数说明版本
title-自定义标题内容-
desc-自定义描述内容-