1

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) {
+      // 不再控制 body 的 overflow，让父容器控制
-        document.body.style.overflow = 'hidden'
-      } else {
-        document.body.style.overflow = ''
-      }
     },
     // 监听路由变化
     '$route'(to, from) {
@@ -128,18 +155,14 @@ export default {
     if (this.showPanel) {
       this.hide()
     }
-    document.body.style.overflow = ''
+    this.restoreParentPosition()
-  },
-  destroyed() {
-    // 确保清理
-    document.body.style.overflow = ''
   }
 }
 </script>
 
 <style lang="less" scoped>
 .float-panel-wrapper {
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   right: 0;
@@ -150,7 +173,7 @@ export default {
 }
 
 .float-panel {
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;