Vuetify v-bottom-sheet无打开时遮罩层异常弹出问题求助

方案1：通过Vuetify Overlay管理器手动清理残留遮罩 #

Vuetify内置了overlay管理器控制全局遮罩层，你可以通过它检查当前活跃遮罩数量，确认无打开的bottom sheet时强制关闭多余遮罩：

// 在组件方法或全局混入中添加清理逻辑
clearStuckOverlay() {
  const { overlay } = this.$vuetify;
  // 检查是否存在活跃遮罩，但无已打开的bottom sheet
  const hasOpenSheet = this.$root.$children.some(child => 
    child.$options.name === 'VBottomSheet' && child.isActive
  );
  if (overlay.hasActive && !hasOpenSheet) {
    overlay.closeAll();
  }
}

可在路由切换、弹窗关闭后调用该方法，或设置低频率定时检查（如每30秒一次，避免性能损耗）。

方案2：严格控制bottom sheet的状态同步 #

确保每个bottom sheet的显示状态与组件内部状态完全同步，避免异步操作或状态更新不及时导致遮罩残留：

1. 给每个bottom sheet绑定唯一v-model，并通过ref获取组件实例：

<v-bottom-sheet v-model="isSheetOpen" ref="userSheet">
  <!-- 弹窗内容 -->
</v-bottom-sheet>

2. 关闭弹窗时，同时更新状态变量并调用组件close方法：

closeSheet() {
  this.isSheetOpen = false;
  if (this.$refs.userSheet) {
    this.$refs.userSheet.close();
  }
}

方案3：手动检测并移除DOM中的残留遮罩元素 #

若上述方法无效，可直接操作DOM，检测无对应弹窗的遮罩层并移除：

removeStuckOverlay() {
  const overlays = document.querySelectorAll('.v-overlay');
  overlays.forEach(overlay => {
    const sheet = overlay.nextElementSibling;
    // 判断遮罩是否关联已关闭的bottom sheet
    if (!sheet || !sheet.classList.contains('v-bottom-sheet--active')) {
      overlay.remove();
    }
  });
}

可将该方法绑定到全局空白处点击事件，或在路由守卫中调用。

方案4：升级Vuetify到最新稳定版 #

这类遮罩残留问题多为特定版本Bug，建议检查当前Vuetify版本，升级到同大版本下的最新稳定版（Vue2对应Vuetify2.x最新版，Vue3对应Vuetify3.x最新版），官方大概率已修复此类状态同步问题。

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