mirror of
https://github.com/fugary/simple-element-plus-template.git
synced 2026-09-11 09:23:53 +00:00
bug: 修复左侧菜单展开时动画丢失问题
This commit is contained in:
@@ -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]"
|
||||
|
||||
Reference in New Issue
Block a user