如何修改Vuetify Stepper步骤间连接线的颜色与粗细？

核心问题解决 #

1. 自定义连接线颜色与粗细
   Vuetify组件内部样式受scoped限制，需用:deep()穿透修改v-divider属性；同时隐藏默认的stepper分隔线，避免样式冲突。

2. divider-div垂直对齐生效
   给divider-div添加flex布局控制内部元素对齐，确保margin等样式能正确作用。

修改后的完整代码 #

Script部分（修正重复ID）

<script setup>
import { ref } from 'vue'
import Dialogue from './Dialogue.vue'

const currentStep = ref(1)

const steps = [
  { id: 1, title: 'Step 1', subtitle: 'Description of step 1' },
  { id: 2, title: 'Step 2', subtitle: 'Description of step 2' },
  { id: 3, title: 'Step 3', subtitle: 'Description of step 3' },
  { id: 4, title: 'Step 4', subtitle: 'Description of step 4' },
]
</script>

Style部分（样式调整）

<style scoped>
/* 隐藏默认的stepper头像和内置分隔线 */
.v-stepper :deep(.v-stepper-item__avatar) {
  width: 0 !important;
  height: 0 !important;
  margin: 0;
  background-color: gray;
  border-radius: 10px;
  font-size: 1rem !important;
}

.v-stepper :deep(.v-stepper-item__divider) {
  display: none;
}

.stepper-item-wrapper {
  background-color: white;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 85px;
  width: 120px;
  border-radius: 5px;
}

/* 调整分隔线容器的垂直对齐与间距 */
.divider-div {
  display: flex;
  align-items: center;
  margin-bottom: 40px; /* 按需求调整垂直位置 */
  margin-left: 10px;
  margin-right: 10px;
}

/* 修改自定义分隔线的颜色与粗细 */
.divider-div :deep(.v-divider) {
  border-color: #ff5722; /* 替换为目标颜色 */
  border-width: 2px; /* 替换为目标粗细 */
}

.icon-container {
  height: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid black;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.text-container {
  height: 60%;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

Template部分（保持原有结构）

<template>
  <v-stepper
    v-model="currentStep"
    alt-labels
    elevation="0"
    :border="false"
    density="compact"
    style="background-color: teal; margin: 10px"
  >
    <v-stepper-header>
      <template v-for="(step, index) in steps" :key="step.id">
        <div class="stepper-item-wrapper">
          <div class="text-container">
            <p v-if="index == 0" @click="console.log('hello')">
              Claim data reader
            </p>
            <p v-if="index == 1">Data cleaning</p>
            <p v-if="index == 2">Model training</p>
            <p v-if="index == 3">Model validation</p>
          </div>
          <div class="icon-container">
            <v-icon
              v-if="index < 2"
              icon="mdi-check-circle"
              color="green darken-2"
            ></v-icon>
            <v-icon
              v-if="index == 2"
              icon="mdi-close-circle"
              color="red"
            ></v-icon>
            <v-icon
              v-if="index == 3"
              icon="mdi-clock-outline"
              color="grey"
            ></v-icon>
          </div>
        </div>
        <div class="divider-div">
          <v-divider
            v-if="index !== steps.length - 1"
            :key="'divider-' + step.id"
          />
        </div>
      </template>
    </v-stepper-header>
  </v-stepper>
</template>

关键说明 #

• 用:deep(.v-divider)突破scoped样式限制，直接修改分隔线的border-color和border-width属性。
• 隐藏默认的.v-stepper-item__divider，避免与自定义分隔线重复显示。
• 给divider-div添加display: flex和align-items: center，确保垂直对齐样式生效。
• 修正steps数组中重复的id值，避免Vue渲染时的key冲突警告。

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