Vuetify如何实现v-navigation-drawer点击展开悬浮不挤压内容

你观察到的「给width传带单位字符串就能实现无偏移展开」的表现不是bug，本质是Vuetify对v-navigation-drawer宽度属性的解析规则差异：

• 当width/mini-variant-width传入纯数值（包括数字类型、纯数字字符串，比如224、"224"）时，组件默认启用推挤式布局，切换mini状态时会自动给<v-main>注入对应边距偏移，把内容区推开，这就是你碰到的内容位置被改动的问题
• 当传入带CSS单位的字符串（比如"224px"、"16rem"）时，组件内部的布局偏移计算逻辑不会被触发，抽屉会以脱离文档流的悬浮形式渲染，自然不会挤压内容。但这种写法属于依赖组件内部未文档化的实现逻辑，属于取巧方案，不推荐生产环境使用，小版本迭代就可能失效。

不需要靠取巧写法，用组件官方提供的属性组合就能稳定实现目标效果：点击触发展开/收起、展开时悬浮在内容上方不挤压布局，和expand-on-hover的渲染效果完全一致。
核心是给抽屉添加floating属性——这个属性的官方定义就是让抽屉以悬浮层模式渲染，永远不会触发主内容区的布局偏移，再配合自定义的响应式变量控制mini-variant状态即可。
基础实现代码：

<template>
  <v-navigation-drawer
    v-model="drawerVisible"
    permanent
    floating
    :mini-variant="isMini"
    :width="224"
    :mini-variant-width="56"
    @click="isMini = !isMini"
  >
    <!-- 抽屉内导航菜单内容 -->
  </v-navigation-drawer>

  <v-main>
    <!-- 页面主内容，无需额外添加偏移样式，不会被抽屉推开 -->
  </v-main>
</template>

<script setup>
import { ref } from 'vue'
const drawerVisible = ref(true)
const isMini = ref(true) // 默认保持mini收起状态
</script>

可以根据需求按需扩展交互：

• 需要和原生expand-on-hover一致的悬停展开效果：给抽屉绑定@mouseenter="isMini = false"、@mouseleave="isMini = true"即可，和点击切换逻辑不冲突
• 需要点击抽屉外部区域自动收起：把permanent属性替换为persistent
• 需要调整展开时的阴影深度：直接通过elevation属性设置对应数值即可

补充：如果需要实现展开时的半透明遮罩，再加一个scrim属性绑定对应透明度值就可以，不会影响悬浮不挤内容的核心逻辑。

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