如何解决Vuetify中v-bottom-sheet或v-dialog阻断主页面内容交互的问题

这个问题是Vuetify浮层类组件的默认设计逻辑导致的：v-bottom-sheet、dialog这类组件默认会启用焦点锁定、滚动锁定，优先保证用户操作浮层内容，哪怕设置了hide-overlay隐藏遮罩、persistent禁止点击遮罩关闭，底层的阻断逻辑仍然会生效，所以会出现主页面输入框无响应、滚动异常的问题。

• 方法1：补充配置内置属性
  在你现有配置的基础上，新增两个关闭锁定逻辑的属性，Vuetify 3版本需要额外加禁用焦点陷阱的属性：

<v-bottom-sheet
  v-model="playSheetShow"
  hide-overlay
  persistent
  :retain-focus="false"
  :lock-scroll="false"
  <!-- 仅Vuetify 3版本添加以下属性 -->
  no-focus-trap
>
  <!-- 播放器内容 -->
</v-bottom-sheet>

90%以上的场景配置完这些属性就可以正常交互。

• 方法2：CSS强制覆盖阻断样式
  如果加了属性仍然有异常，给组件添加自定义类名，用CSS强制解除全局交互阻断：
  首先给组件加自定义类：

<v-bottom-sheet class="music-player-sheet" ...>

然后添加全局样式：

/* 适配支持:has选择器的浏览器 */
body:has(.music-player-sheet.v-bottom-sheet--active) {
  pointer-events: auto !important;
  overflow-y: auto !important;
}
/* 旧浏览器可以在组件激活时手动给body加`.player-active`类，替换上面的选择器为body.player-active即可 */

/* 保证播放器自身正常响应操作 */
.music-player-sheet {
  pointer-events: auto !important;
}

• 方法3：自定义常驻底部播放器
  如果你的音乐播放器需要长期悬浮在底部，不需要浮层的展开收起动效逻辑，完全可以放弃v-bottom-sheet组件，自己写一个固定定位的组件实现，可控性更高：

<!-- 独立播放器组件 -->
<div class="custom-music-player">
  <!-- 播放器控件内容 -->
</div>

<style>
.custom-music-player {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100; /* 只要高于主内容的z-index即可 */
  /* 自行补充背景、阴影、高度等业务样式 */
}
</style>

这个方案完全规避了浮层组件的内置阻断逻辑，适配性最强。

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