From 9d507c88abfbbc3d375cd0d5645e999a0c99d456 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=88=90?= Date: Thu, 6 Nov 2025 13:59:58 +0800 Subject: [PATCH] 1 --- src/components/FloatPanel/index.vue | 49 +++++++++++++++++++++-------- 1 file changed, 36 insertions(+), 13 deletions(-) diff --git a/src/components/FloatPanel/index.vue b/src/components/FloatPanel/index.vue index 02a4aed..869a224 100644 --- a/src/components/FloatPanel/index.vue +++ b/src/components/FloatPanel/index.vue @@ -71,7 +71,9 @@ export default { data() { return { showPanel: false, - callback: null + callback: null, + parentElement: null, + originalParentPosition: null } }, computed: { @@ -91,12 +93,41 @@ export default { }, methods: { show(callback) { + this.ensureParentPosition() this.showPanel = true this.callback = callback }, hide() { this.showPanel = false this.callback = null + this.restoreParentPosition() + }, + ensureParentPosition() { + // 确保父容器有 position: relative + this.$nextTick(() => { + if (!this.parentElement && this.$el) { + this.parentElement = this.$el.parentElement + } + if (this.parentElement) { + const computedStyle = window.getComputedStyle(this.parentElement) + const position = computedStyle.position + if (position === 'static' || !position) { + this.originalParentPosition = this.parentElement.style.position || '' + this.parentElement.style.position = 'relative' + } + } + }) + }, + restoreParentPosition() { + // 恢复父容器的原始定位 + if (this.parentElement && this.originalParentPosition !== null) { + if (this.originalParentPosition) { + this.parentElement.style.position = this.originalParentPosition + } else { + this.parentElement.style.position = '' + } + this.originalParentPosition = null + } }, handleBack() { this.$emit('back') @@ -110,11 +141,7 @@ export default { }, watch: { showPanel(newVal) { - if (newVal) { - document.body.style.overflow = 'hidden' - } else { - document.body.style.overflow = '' - } + // 不再控制 body 的 overflow,让父容器控制 }, // 监听路由变化 '$route'(to, from) { @@ -128,18 +155,14 @@ export default { if (this.showPanel) { this.hide() } - document.body.style.overflow = '' - }, - destroyed() { - // 确保清理 - document.body.style.overflow = '' + this.restoreParentPosition() } }