Vuetify教程：如何缩小v-tabs标签头的尺寸？

要解决移动端v-tabs标签头占用空间过大的问题，你需要通过深度选择器覆盖Vuetify组件的默认内边距和间距样式——因为组件样式是封装在内部的，直接修改类名无法生效。以下是具体实现步骤：

自定义CSS样式 #

在组件的<style>标签中添加以下样式，调整标签的内边距和元素间距：

<style scoped>
/* 减少标签左右内边距，缩小横向占用空间 */
:deep(.v-tab) {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* 调整堆叠模式下图标与文字的垂直间距 */
:deep(.v-tab__content--stacked) {
  gap: 4px !important;
}

/* 可选：减少文字与图标之间的额外间距 */
:deep(.v-tab__text) {
  margin-top: 0 !important;
}
</style>

修改后的完整代码 #

将上述样式添加到组件中，同时可以移除show-arrows属性（所有标签现在能完整显示）：

<template>
  <v-sheet>
    <v-row no-gutters>
      <v-col>
        <v-tabs
          class="ma-n3 pa-n2"
          bg-color="blue-lighten-4"
          center-active
          color="blue"
          stacked
        >
          <v-tab value="calendar">
            <v-icon icon="mdiCalendarMonth" /> Rides
          </v-tab>
          <v-tab value="newRide"> 
            <v-icon icon="mdiBike" /> New
          </v-tab>
          <v-tab value="routes"> 
            <v-icon icon="mdiMap" /> Routes
          </v-tab>
          <v-tab value="coffee"> 
            <v-icon icon="mdiCoffee" /> Coffee
          </v-tab>
          <v-tab value="account">
            <v-icon icon="mdiAccountEdit" /> Account
          </v-tab>
          <v-tab value="help"> 
            <v-icon icon="mdiHelp" /> Help
          </v-tab>
          <v-tab value="exit"> 
            <v-icon icon="mdiDoorOpen" /> Exit
          </v-tab>
        </v-tabs>
      </v-col>
    </v-row>
  </v-sheet>
</template>

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

const msg = ref('Hello World!')
</script>

<style scoped>
:deep(.v-tab) {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

:deep(.v-tab__content--stacked) {
  gap: 4px !important;
}

:deep(.v-tab__text) {
  margin-top: 0 !important;
}
</style>

关键说明 #

• 使用:deep()深度选择器是为了穿透Vue组件的样式作用域，确保自定义样式能覆盖Vuetify的默认样式。
• 你可以根据实际需求调整padding和gap的数值，找到最适合的紧凑程度。
• 移除show-arrows属性后，移动端不会显示左右箭头，所有标签能直接展示在一行内。

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