如何实现Vuetify步进器横向滚动并放大步骤项？

我使用Vuetify步进器，共有14个步骤，无法适配容器。尝试用div嵌套强制横向溢出并滚动但未成功，步进器嵌套在expansion-panel中，希望步骤项足够大，每次仅显示3-4个，让滚动更合理，同时支持步骤内的大内容。

修改后的完整代码 #

<script setup>
import { ref } from 'vue';

// 修复id重复问题，确保每个步骤key唯一
const steps = [
  { id: "X", title: "1", complete: false, icon: "mdi-domain" },
  { id: "Y", title: "2", complete: false, icon: "mdi-file-tree" },
  { id: "Z", title: "3", complete: false, icon: "mdi-database-cog" },
  { id: "H", title: "4", complete: false, icon: "mdi-tune" },
  { id: "M5", title: "5", icon: "mdi-file-check-outline" },
  { id: "M6", title: "6", icon: "mdi-file-check-outline" },
  { id: "M7", title: "7", icon: "mdi-file-check-outline" },
  { id: "M8", title: "8", icon: "mdi-file-check-outline" },
  { id: "M9", title: "9", icon: "mdi-file-check-outline" },
  { id: "M10", title: "10", icon: "mdi-file-check-outline" },
  { id: "M11", title: "11", icon: "mdi-file-check-outline" },
  { id: "M12", title: "12", icon: "mdi-file-check-outline" },
  { id: "M13", title: "13", icon: "mdi-file-check-outline" },
  { id: "M14", title: "14", icon: "mdi-file-check-outline" },
];

const currentStep = ref(1);
const stage = ref('');

const hasValue = (value) => !!value;

steps.forEach(step => {
  step.complete = hasValue(step.id);
});
</script>

<template>
  <div class="stepper-container">
    <v-stepper 
      v-model="currentStep" 
      alt-labels
      elevation="0" 
      :border="false" 
      density="compact"
    >
      <v-stepper-header class="stepper-header">
        <template v-for="(step, index) in steps" :key="step.id">
          <v-stepper-item 
            :value="index" 
            :rules="step.rules" 
            :color="index < 5 ? 'green' : (index === 5 ? 'red' : 'grey')"
            editable
            @click="stage='form'"
            :ripple="false"
            class="stepper-item"
          >
            <template v-slot:title>
              {{ step.title }}
            </template>
            <template v-slot:subtitle v-if="step.subtitle">
              {{ step.subtitle }}
            </template>
            <template v-slot:icon>
              {{ index + 1 }}
            </template>
          </v-stepper-item>
          <v-divider v-if="index !== steps.length - 1" :key="'divider-' + step.id" />
        </template>
      </v-stepper-header>
    </v-stepper>
  </div>
</template>

<style scoped>
.stepper-container {
  overflow-x: auto;
  padding: 10px;
  background-color: #f5f5f5;
}

.stepper-header {
  display: flex;
  flex-wrap: nowrap; /* 强制步骤横向排列，不换行 */
  overflow-x: auto; /* 超出容器时显示横向滚动条 */
  gap: 0; /* 保持分隔线和步骤的紧凑布局 */
}

.stepper-item {
  min-width: 120px; /* 设置每个步骤的最小宽度，确保每次显示3-4个 */
  flex-shrink: 0; /* 禁止步骤项被压缩 */
}

/* 自定义滚动条样式（可选） */
.stepper-container::-webkit-scrollbar {
  height: 8px;
}

.stepper-container::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}
</style>

关键修改说明 #

• 修复key重复问题：将重复的id: "M"改为唯一值，避免Vue渲染警告
• 容器样式调整：外层容器仅保留必要的overflow-x: auto，移除多余嵌套div
• 步进器头部布局：给v-stepper-header添加flex-wrap: nowrap和overflow-x: auto，强制横向排列并支持滚动
• 步骤项尺寸控制：给v-stepper-item设置min-width: 120px和flex-shrink: 0，确保每个步骤足够大，不会被压缩
• 可选优化：添加自定义滚动条样式，提升视觉体验

效果对比 #

• 当前问题效果：步进器所有步骤被压缩挤在一起，无法正常区分
• 期望实现效果：步进器支持横向滚动，每个步骤保持合适宽度，每次显示3-4个，滚动流畅

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