Livewire搭配Bootstrap5使用Offcanvas发起请求后遮罩层消失如何解决

Bootstrap 5 Offcanvas 的遮罩层默认会被动态插入到 <body> 标签末尾，不属于你编写的 Offcanvas 元素内部，也不在当前 Livewire 组件的渲染范围里。你给 Offcanvas 添加的 wire:ignore-self 仅能作用于 Offcanvas 元素本身，无法覆盖到全局生成的遮罩层。当 Livewire 触发组件重渲染时，遮罩层会被 DOM 比对逻辑移除，最终出现侧边栏保留、遮罩消失的问题。

按落地成本从低到高排序，可根据你的业务场景选择：

• 方案1：调整wire:model触发时机（适合不需要实时提交输入内容的场景）
  把输入框的 wire:model="xda" 改为 wire:model.defer="xda"，修改后输入过程不会触发 Livewire 请求，只有提交动作触发时才会向服务端传值，全程不会重渲染组件，自然不会出现遮罩消失的问题。
• 方案2：监听 Livewire 更新事件，自动恢复遮罩（适合需要实时提交输入内容的场景）
  加一段JS监听Livewire的更新完成钩子，判断侧边栏处于打开状态时自动调用显示方法，Bootstrap会自动补全丢失的遮罩，不会触发侧边栏闪动：

  document.addEventListener('livewire:load', () => {
    const offcanvasEl = document.getElementById('offcanvasExample')
    const offcanvasInstance = new bootstrap.Offcanvas(offcanvasEl)
    Livewire.hook('message.processed', () => {
      if (offcanvasEl.classList.contains('show')) {
        offcanvasInstance.show()
      }
    })
  })
  

• 方案3：修改Offcanvas遮罩生成容器
  初始化Offcanvas时通过container参数指定遮罩生成到当前Livewire组件内部，再给组件根元素添加wire:ignore.self属性，遮罩就会被纳入忽略重渲染的范围：
  1. 先给你的Livewire组件根元素添加唯一ID，比如id="current-component"
  2. 初始化Offcanvas时传入配置：

  const offcanvasInstance = new bootstrap.Offcanvas(document.getElementById('offcanvasExample'), {
    container: '#current-component'
  })
  

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