VueJS集成CoreUI时sidebar关闭后移动端页面被禁用问题

• 该问题是CoreUI sidebar组件在Android Chrome环境下的事件时序bug导致：移动端sidebar展开时，CoreUI会默认给<body>标签添加sidebar-open类名、设置overflow: hidden和pointer-events: none样式，同时插入全屏遮罩层拦截非sidebar区域的交互。在Android Chrome上通过触摸操作（点击遮罩、滑动关闭）触发sidebar收起时，触摸事件的触发顺序和桌面端存在差异，会出现sidebar视觉上完全收起、遮罩层被移除，但body上的交互锁样式和类名没有同步清理的情况，最终导致整个页面无法响应滚动、点击操作，只能刷新恢复。
• 如果项目中给sidebar绑定了自定义关闭逻辑（比如点击菜单项跳转路由时自动收起sidebar），在调用关闭方法后立刻执行路由跳转，会直接打断CoreUI内置的关闭状态收尾流程，高频触发该锁死问题。

优先方案：升级CoreUI依赖到修复版本 #

根据你使用的Vue版本选择对应的升级目标，官方已经在稳定版中修复了该时序问题：

• Vue2技术栈使用@coreui/vue的场景，升级到2.1.18及以上版本
• Vue3技术栈使用@coreui/vue3的场景，升级到4.10.1及以上版本
  升级后不需要修改业务代码，原有交互逻辑可以直接兼容。

兜底方案：手动监听关闭事件清理残留状态 #

如果暂时无法升级依赖，可以通过监听sidebar的关闭事件，手动清理DOM上残留的交互锁，代码示例：

<template>
  <CSidebar @hide="handleSidebarHide" v-model:visible="sidebarVisible">
    <!-- 原有sidebar内容 -->
  </CSidebar>
</template>

<script setup>
import { nextTick, ref } from 'vue'
const sidebarVisible = ref(false)

const handleSidebarHide = () => {
  nextTick(() => {
    // 清理body上的残留类名和锁样式
    document.body.classList.remove('sidebar-open', 'sidebar-show')
    document.body.style.removeProperty('overflow')
    document.body.style.removeProperty('pointer-events')
    // 移除可能残留的遮罩节点
    const residualBackdrop = document.querySelector('.sidebar-backdrop')
    residualBackdrop?.remove()
  })
}
</script>

自定义逻辑修复 #

如果项目中存在手动触发sidebar关闭后跳转路由/执行其他重渲染逻辑的代码，需要调整执行时序，等sidebar完全关闭后再执行后续操作，避免打断内置清理流程：

// 错误写法：关闭后立刻跳转会打断清理流程
const closeAndJumpWrong = () => {
  sidebarRef.value.hide()
  router.push('/dashboard')
}

// 正确写法：等待关闭动作完成后再执行后续逻辑
const closeAndJumpCorrect = async () => {
  await sidebarRef.value.hide()
  router.push('/dashboard')
}

验证方式：修复后在Android Chrome中反复开关sidebar、点击菜单项跳转，连续测试10次以上未出现页面无法交互的情况，即修复生效。

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