如何设置Vuetify 3 v-select菜单复选框左右内边距并解决调试菜单消失问题

一、让菜单保持展开以便调试 #

调试时点击菜单就消失？试试这两个方法：

• 断点暂停法：打开F12的「Sources」标签，点工具栏里的暂停图标，再点击v-select展开菜单，脚本会暂停，菜单就不会消失了，能直接查看激活状态的DOM。
• 延时断点法：在控制台输入以下代码，回车后2秒内点开菜单，自动触发断点锁定菜单：

  setTimeout(() => debugger, 2000)
  

二、调整复选框/标签内边距的CSS代码 #

因为Vue组件有样式隔离，得用:deep()深度选择器穿透，针对Vuetify3的v-select菜单写样式：

减小复选框右内边距 #

<style scoped>
:deep(.v-select .v-list-item .v-checkbox) {
  margin-right: 8px; /* 自己改数值，默认一般是12px */
}
</style>

减小标签左内边距 #

<style scoped>
:deep(.v-select .v-list-item__title) {
  padding-left: 8px; /* 按需调整 */
}
</style>

整体调整菜单选项内边距 #

要是想直接改整个选项的左侧内边距，也可以这么写：

<style scoped>
:deep(.v-select .v-list-item) {
  padding-left: 8px;
}
</style>

提示：不同Vuetify小版本的类名可能有细微差别，用上面的调试方法找到准确类名再调整数值更稳妥。

内容的提问来源于stack exchange，提问作者Ersin Güvenç