bug: 修复左侧菜单展开时动画丢失问题

This commit is contained in:
gary.fu
2026-08-24 15:53:47 +08:00
parent 71689ad7ea
commit 1400b63333

View File

@@ -4,7 +4,7 @@ import MainContent from '@/layout/MainContent.vue'
import GlobalSettings from '@/views/components/global/GlobalSettings.vue'
import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
import { GlobalLayoutMode } from '@/consts/GlobalConstants'
import { computed, ref } from 'vue'
import { computed, ref, watch, onUnmounted } from 'vue'
import { useMenuConfigStore } from '@/stores/MenuConfigStore'
import { useTabModeScrollSaver } from '@/route/RouteUtils'
@@ -14,6 +14,31 @@ const showLeftMenu = computed(() => {
})
const leftMenuAsideRef = ref(null)
// 控制 split 是否启用:收起时立即禁用 split展开时先执行 CSS 展开动画300ms 动画完成后再启用 split
const isSplitDisabled = ref(globalConfigStore.isCollapseLeft)
let expandTimer = null
watch(() => globalConfigStore.isCollapseLeft, (collapsed) => {
if (expandTimer) {
clearTimeout(expandTimer)
expandTimer = null
}
if (collapsed) {
isSplitDisabled.value = true
} else {
isSplitDisabled.value = true
expandTimer = setTimeout(() => {
isSplitDisabled.value = false
}, 300)
}
}, { immediate: true })
onUnmounted(() => {
if (expandTimer) {
clearTimeout(expandTimer)
}
})
const handleDragEnd = () => {
if (leftMenuAsideRef.value) {
const width = leftMenuAsideRef.value.$el.offsetWidth
@@ -31,7 +56,7 @@ useMenuConfigStore().loadBusinessMenus()
<el-container class="index-container">
<common-split
v-if="showLeftMenu"
:disabled="globalConfigStore.isCollapseLeft"
:disabled="isSplitDisabled"
:class="{ 'collapsed-split': globalConfigStore.isCollapseLeft }"
:sizes="[20, 80]"
:min-size="[60, 500]"