Bootstrap5结合Nuxt3使用OffCanvas时遮罩层未变暗问题

手动切换show类名和visibility样式的写法，仅控制了Offcanvas侧边栏本身的显隐，没有触发Bootstrap 5 Offcanvas组件的原生JS逻辑。Bootstrap的深色backdrop遮罩层并非CSS自带，而是由组件JS动态生成、插入到页面根节点的元素，纯手动修改类名不会触发遮罩的创建、显隐流程，因此遮罩无法正常展示。
这种手动改类名的写法还会缺失两个核心交互：

• 点击遮罩关闭侧边栏、按ESC键关闭侧边栏的原生交互完全失效
• 侧边栏打开时不会自动给body标签添加滚动锁定样式，页面仍可自由滚动

根据项目需求二选一即可，优先推荐第一种方案。

方案1：调用Bootstrap原生JS API（推荐） #

移除手动写的类名、样式切换逻辑，引入Bootstrap提供的Offcanvas类，通过官方API控制组件显隐，遮罩、交互、滚动锁定都会自动处理，和原生效果完全一致。
修改后的OffCanvas.vue组件代码如下：

<template>
  <div
    class="offcanvas offcanvas-start"
    tabindex="-1"
    ref="offcanvasRef"
  >
    <div class="offcanvas-header">
      <h5 class="offcanvas-title">
        Offcanvas with backdrop
      </h5>
      <button
        type="button"
        class="btn-close text-reset"
        data-bs-dismiss="offcanvas"
        aria-label="Close"
      ></button>
    </div>
    <div class="offcanvas-body">
      <p>.....</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { Offcanvas } from 'bootstrap'

const props = defineProps({
  showMenu: {
    type: Boolean,
    default: false,
  },
})
const emit = defineEmits(['update:showMenu'])

const offcanvasRef = ref(null)
let offcanvasInstance = null

onMounted(() => {
  // 初始化Offcanvas实例，默认开启遮罩、ESC关闭功能
  offcanvasInstance = new Offcanvas(offcanvasRef.value)
  // 监听侧边栏关闭事件，同步状态到父组件
  offcanvasRef.value.addEventListener('hidden.bs.offcanvas', () => {
    emit('update:showMenu', false)
  })
})

// 监听父组件传入的状态，控制侧边栏显隐
watch(() => props.showMenu, (newVal) => {
  newVal ? offcanvasInstance?.show() : offcanvasInstance?.hide()
})
</script>

父组件调用时通过v-model:showMenu绑定布尔状态即可，触发按钮点击时将绑定值设为true，就能正常打开带深色遮罩的侧边栏。

方案2：手动实现遮罩逻辑 #

如果项目中没有引入Bootstrap的JS模块，也可以自行补全遮罩层逻辑，但需要额外处理点击关闭、ESC关闭、滚动锁定等交互。
在组件模板中添加和Offcanvas平级的遮罩元素：

<template>
  <!-- 自定义遮罩层 -->
  <div 
    class="offcanvas-backdrop fade show"
    @click="$emit('update:showMenu', false)"
    v-if="showMenu"
  ></div>
  <div
    class="offcanvas offcanvas-start"
    :class="showMenu ? 'show' : ''"
    tabindex="-1"
    :style="{ visibility: showMenu ? 'visible' : 'hidden' }"
  >
    <!-- 原有侧边栏内容保持不变 -->
  </div>
</template>

注意：使用该方案需要额外补全两个逻辑：一是侧边栏打开时给document.body添加overflow: hidden样式锁定滚动，关闭时移除；二是监听全局键盘事件，按下ESC键时关闭侧边栏。同时要确认遮罩层z-index为1040、侧边栏z-index为1045，避免层级错乱。

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