移动端点击侧边栏不会自动关闭蒙层

[one-zen]

1. 发现在移动端点击侧边栏不会自动关闭蒙层,而且每次点击都会在body中添加蒙层标签
2. 点击侧边栏会出点一个一闪而过的 dialog 弹窗

[huangwenboha563]

1. 发现在移动端点击侧边栏不会自动关闭蒙层,而且每次点击都会在body中添加蒙层标签
2. 点击侧边栏会出点一个一闪而过的 dialog 弹窗

这不是admin系统吗，你移动端？？？是什么鬼啊

[one-zen]

admin 是不是只能在 pc 端用,不能在移动端使用吗?你脑子瓦特了吗

[yangzongzhuan]

项目技术相关的问题请到 https://gitee.com/y_project/RuoYi-Vue/issues 提问，同时提供出能复现问题步骤。

[KingPengZero]

src/layout/index.vue

这里改一下：就可以了，监听路由的变化

watch(route, () => { if (device.value === "mobile" && sidebar.value.opened) { useAppStore().closeSideBar({ withoutAnimation: false }) } })

watchEffect(() => { // if (device.value === "mobile" && sidebar.value.opened) { // useAppStore().closeSideBar({ withoutAnimation: false }) // } if (width.value - 1 < WIDTH) { useAppStore().toggleDevice("mobile") useAppStore().closeSideBar({ withoutAnimation: true }) } else { useAppStore().toggleDevice("desktop") } })

[KingPengZero]

1. 发现在移动端点击侧边栏不会自动关闭蒙层,而且每次点击都会在body中添加蒙层标签
2. 点击侧边栏会出点一个一闪而过的 dialog 弹窗

移动端和pc端增加代码：src/layout/index.vue

1、关键代码 watch(route, () => { if (device.value === "mobile" && sidebar.value.opened) { useAppStore().closeSideBar({ withoutAnimation: false }) } })

watchEffect(() => { // if (device.value === "mobile" && sidebar.value.opened) { // useAppStore().closeSideBar({ withoutAnimation: false }) // } if (width.value - 1 < WIDTH) { useAppStore().toggleDevice("mobile") useAppStore().closeSideBar({ withoutAnimation: true }) } else { useAppStore().toggleDevice("desktop") } })

2、特殊场景的代码：

onMounted(() => { window.addEventListener("resize", resizeHandler) }) onBeforeUnmount(() => { window.removeEventListener("resize", resizeHandler) })

onMounted(() => { resizeHandler() })

function resizeHandler() { if (!document.hidden) { const isMobile = width.value - 1 < WIDTH useAppStore().toggleDevice(isMobile ? "mobile" : "desktop") if (isMobile) { useAppStore().closeSideBar({ withoutAnimation: true }) } } }