能否调整Vuetify组件尺寸？输入组件高度与字号修改方法咨询

嘿，我之前做项目的时候也被Vuetify默认输入组件的大尺寸困扰过，折腾出几个实用的调整方法，分享给你：

这是最省心的方式，Vuetify的v-text-field、v-select这类组件本身支持size属性，可选值有small、x-small，直接设置就能快速缩小尺寸：

<!-- 小尺寸输入框 -->
<v-text-field label="用户名" size="small"></v-text-field>
<!-- 超小尺寸下拉选择框 -->
<v-select label="选择类型" size="x-small" :items="['选项1', '选项2']"></v-select>

这个方法不需要写额外样式，适合快速适配大部分场景。

如果内置的尺寸还是不符合你的需求，就用深度选择器直接修改组件的内部样式：

调整高度 #

/* 针对Vue2 + Vuetify2 */
::v-deep .v-text-field,
::v-deep .v-select {
  height: 32px; /* 自定义你想要的高度 */
}
/* 同步调整输入区域的最小高度，避免内容错位 */
::v-deep .v-input__control {
  min-height: 32px;
}

/* 如果是Vue3 + Vuetify3，深度选择器换成 :deep() */
:deep(.v-text-field),
:deep(.v-select) {
  height: 32px;
}
:deep(.v-input__control) {
  min-height: 32px;
}

调整字号 #

/* 修改输入框内的文字大小 */
::v-deep .v-text-field input,
::v-deep .v-select input {
  font-size: 14px;
}
/* 修改标签文字的大小 */
::v-deep .v-text-field label,
::v-deep .v-select label {
  font-size: 12px;
}

如果觉得高度还是不对，别忘了检查组件的内边距，有时候可以加个padding: 0 8px;来适配自定义高度。

要是你想让整个项目的输入组件都用同一尺寸，可以在Vuetify的全局配置里设置默认值：

// 在你的Vuetify初始化文件（比如 vuetify.js）里
import { createVuetify } from 'vuetify'

export default createVuetify({
  defaults: {
    VTextField: {
      class: 'custom-input'
    },
    VSelect: {
      class: 'custom-input'
    }
  }
})

然后在全局CSS里写对应的样式：

.custom-input :deep(input) {
  font-size: 14px;
}
.custom-input :deep(.v-input__control) {
  min-height: 32px;
}

这样就能一次性搞定所有输入组件的尺寸啦，亲测有效～

内容的提问来源于stack exchange，提问作者Ori.Lin