Vuetify中v-list-item用prepend插槽时标题对齐问题求助

出现对齐问题的核心原因是：使用prepend-icon属性时，Vuetify会自动将图标包裹在带有统一样式的容器（类名为v-list-item__prepend-icon）中，而自定义prepend插槽的内容没有继承这个容器的布局规则，导致标题位置偏移。

下面提供两种简单的解决方式：

方法一：复用Vuetify默认前置图标容器类 #

直接给自定义前置内容套上v-list-item__prepend-icon类，让它和默认图标容器保持一致的内边距、尺寸和对齐方式：

<v-navigation-drawer
    location="left"
    width="250"
    permanent
>
  <v-list>
    <v-list-item prepend-icon="mdi-account" title="Profile" to="/profile"></v-list-item>
    <v-list-item prepend-icon="mdi-email-fast" title="Feedback" to="/feedback"></v-list-item>

    <v-list-item>
      <template v-slot:prepend>
        <!-- 套上默认图标容器类 -->
        <div class="v-list-item__prepend-icon">
          <v-progress-circular
              model-value="30"
              size="25"
              color="deep-orange-lighten-2"
          ></v-progress-circular>
        </div>
      </template>

      <template v-slot:title>
            Progress
      </template>
    </v-list-item>
  </v-list>
</v-navigation-drawer>

方法二：自定义CSS统一布局规则 #

如果需要更灵活的样式控制，可以手动设置自定义前置内容的布局属性，匹配默认图标容器的参数：

<v-navigation-drawer
    location="left"
    width="250"
    permanent
>
  <v-list>
    <v-list-item prepend-icon="mdi-account" title="Profile" to="/profile"></v-list-item>
    <v-list-item prepend-icon="mdi-email-fast" title="Feedback" to="/feedback"></v-list-item>

    <v-list-item>
      <template v-slot:prepend>
        <div class="custom-prepend">
          <v-progress-circular
              model-value="30"
              size="25"
              color="deep-orange-lighten-2"
          ></v-progress-circular>
        </div>
      </template>

      <template v-slot:title>
            Progress
      </template>
    </v-list-item>
  </v-list>
</v-navigation-drawer>

<style scoped>
.custom-prepend {
  min-width: 40px; /* 和默认图标容器最小宽度一致 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 16px; /* 匹配默认容器的右侧内边距 */
}
</style>

两种方法都能快速让自定义前置内容的列表项，和使用prepend-icon的项实现标题对齐，推荐第一种方法，直接复用框架自带样式，避免后续版本更新导致的样式差异。

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