Vuetify 3 V-Stepper Header插槽使用及样式控制问询

一、属性法过渡效果异常的修复方案 #

属性版写法出现过渡异常，核心原因是每个步骤窗口单独用<v-stepper-window>包裹，破坏了Vuetify内置的过渡逻辑，导致切换时无法触发平滑左右移动动画。修复关键是将所有<v-stepper-window-item>统一放在同一个<v-stepper-window>容器中，同时通过默认插槽获取prev/next方法配合<v-stepper-actions>实现规范的步骤切换。

错误写法（过渡异常） #

<v-stepper>
    <v-stepper-header>
        <!-- 步骤头内容 -->
    </v-stepper-header>

    <!-- 错误：每个窗口单独用v-stepper-window包裹 -->
    <v-stepper-window>
        <v-stepper-window-item value="1">...</v-stepper-window-item>
    </v-stepper-window>
    <v-stepper-window>
        <v-stepper-window-item value="2">...</v-stepper-window-item>
    </v-stepper-window>
</v-stepper>

正确修正版（过渡正常） #

<v-stepper>
  <template v-slot:default="{ prev, next }">
    <v-stepper-header>
      <v-stepper-item
          complete
          editable
          title="Step 1"
          value="1"
      ></v-stepper-item>

      <v-divider></v-divider>

      <v-stepper-item
          complete
          editable
          title="Step 2"
          value="2"
      ></v-stepper-item>

      <v-divider></v-divider>

      <v-stepper-item
          editable
          title="Step 3"
          value="3"
      ></v-stepper-item>
    </v-stepper-header>

    <!-- 正确：所有窗口项放在同一个v-stepper-window内 -->
    <v-stepper-window>
        <v-stepper-window-item value="1">
            <span>Step Window 1</span>
        </v-stepper-window-item>
 
        <v-stepper-window-item value="2">
            <span>Step Window 2</span>
        </v-stepper-window-item>
  
        <v-stepper-window-item value="3">
            <span>Step Window 3</span>
        </v-stepper-window-item>
    </v-stepper-window>

    <!-- 使用内置切换方法控制步骤 -->
    <v-stepper-actions
        @click:prev="prev"
        @click:next="next"
    ></v-stepper-actions>
  </template>
</v-stepper>

二、插槽法（items属性方式）控制步骤完成状态与颜色 #

使用:items快速生成步骤时，可通过以下方式自定义步骤头的完成状态与颜色：

1. 重构items为对象数组 #

将纯字符串数组改为包含title、complete、color属性的对象数组，便于状态控制：

// 示例数据
items: [
  { title: 'Step 1', complete: true, color: 'success' },
  { title: 'Step 2', complete: true, color: 'success' },
  { title: 'Step 3', complete: false, color: 'primary' }
]

2. 使用header-item插槽自定义步骤头 #

通过v-slot:header-item获取步骤元数据，手动渲染<v-stepper-item>并绑定状态与颜色：

<v-stepper 
  editable
  :items="items"
  non-linear
>            
  <!-- 自定义步骤头 -->
  <template v-slot:header-item="{ item, index }">
    <v-stepper-item
      :complete="item.complete"
      :color="item.color"
      :title="item.title"
      :value="index + 1"
      editable
    ></v-stepper-item>
    <!-- 分隔线：最后一个步骤不显示 -->
    <v-divider v-if="index < items.length - 1"></v-divider>
  </template>

  <!-- 步骤窗口内容 -->
  <template v-slot:item.1>
      <span>Step Window 1</span>
  </template>
  
  <template v-slot:item.2>
      <span>Step Window 2</span>
  </template>

  <template v-slot:item.3>
      <span>Step Window 3</span>
  </template>
</v-stepper>

关键说明 #

• :complete属性控制步骤是否标记为完成（显示对勾图标）
• :color属性可指定步骤头主题色（支持Vuetify内置颜色如success、warning等）
• non-linear属性允许自由切换任意步骤，配合editable可修改步骤状态

内容的提问来源于stack exchange，提问作者supremesector