升级Vuetify3.6.0后VNavigationDrawer无法正常显隐求助

问题背景 #

原项目基于Vue 3.4.21 + Vuetify 3.5.8开发，为使用仅3.6.0及以上版本支持的VEmptyState组件，升级Vuetify至3.6.0后，原本由按钮控制显隐的VNavigationDrawer组件出现永久半显示的异常，切换回3.5.8版本则恢复正常。

解决方案 #

1. 显式指定variant属性 #

Vuetify 3.6.x调整了VNavigationDrawer的默认variant值，需手动设置符合需求的变体类型以恢复控制逻辑：

• 若需抽屉关闭时完全隐藏，使用temporary变体：

  <v-navigation-drawer v-model="drawerVisible" variant="temporary">
    <!-- 抽屉内容 -->
  </v-navigation-drawer>
  

• 若需保留抽屉布局占位（关闭时留侧边空白），使用persistent变体：

  <v-navigation-drawer v-model="drawerVisible" variant="persistent">
    <!-- 抽屉内容 -->
  </v-navigation-drawer>
  

2. 禁用permanent属性 #

升级后VNavigationDrawer可能默认启用了permanent属性，该属性会强制抽屉始终显示，需显式关闭：

<v-navigation-drawer v-model="drawerVisible" permanent="false">
  <!-- 抽屉内容 -->
</v-navigation-drawer>

3. 检查mini-variant配置 #

若之前使用了mini-variant功能，需确认其绑定的响应式变量是否正确切换，避免抽屉停留在迷你显示状态：

<v-navigation-drawer 
  v-model="drawerVisible" 
  :mini-variant="isMini"
>
  <!-- 抽屉内容 -->
</v-navigation-drawer>

4. 验证v-model绑定的响应式变量 #

确认控制抽屉显隐的变量（如drawerVisible）在按钮点击时正确触发状态切换，无其他逻辑覆盖该变量的取值。

总结 #

通过显式配置VNavigationDrawer的variant、permanent等核心属性，确保v-model绑定的响应式状态正常，即可恢复3.5.8版本的抽屉显隐控制逻辑，同时兼容Vuetify 3.6.0的VEmptyState组件。

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