Vue3+Vuetify3中v-checkbox与v-radio行高不一致求助

第一步：对齐组件基础属性 #

先把两个组件的属性统一，消除因配置不同导致的高度差异：

• 给v-radio补上hide-details="true"，和v-checkbox-btn保持一致，避免细节区域额外占用高度
• 确保两者都保留dense、inline属性，统一紧凑模式的基础样式

调整后的单选按钮代码片段：

<v-radio density="compact" dense inline hide-details="true"></v-radio>

第二步：用CSS强制统一高度与行高 #

如果属性调整后仍有差异，用深度选择器穿透Vuetify的样式封装，强制覆盖内部样式：

1. 给两个控件添加统一的自定义类，比如uniform-control：

<!-- 单选按钮 -->
<v-radio class="uniform-control" density="compact" dense inline hide-details="true"></v-radio>

<!-- 复选框按钮 -->
<v-checkbox-btn class="uniform-control" density="compact" hide-details="true" inline></v-checkbox-btn>

2. 在组件的<style scoped>中添加以下样式：

::v-deep .uniform-control {
  line-height: 1;
  min-height: 24px; /* 匹配compact模式下控件的标准高度 */
}

::v-deep .uniform-control .v-input__control {
  align-items: center;
  min-height: inherit;
}

::v-deep .uniform-control .v-radio__wrapper,
::v-deep .uniform-control .v-checkbox-btn__wrapper {
  padding: 0; /* 清除两个控件默认的上下内边距差异 */
}

额外优化：容器垂直居中对齐 #

如果v-col内的控件仍有垂直偏移，给v-col添加d-flex align-center类，强制容器内元素垂直居中：

<v-col cols="2" class="d-flex align-center">
  <v-radio class="uniform-control" ...></v-radio>
</v-col>

通过以上步骤，就能让两个控件的行高和整体高度完全一致，解决compact模式下的差异问题。

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