From f60b0eec6a8a7330717dca7777fc0abbac98b369 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Wed, 11 Mar 2026 19:33:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=9B=BE=E7=89=87=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6):=20=E6=96=B0=E5=A2=9ErootMargin=E5=92=8Csho?=
 =?UTF-8?q?w=E5=8F=82=E6=95=B0=EF=BC=8C=E7=94=A8=E4=BA=8E=E9=98=B2?=
 =?UTF-8?q?=E6=AD=A2=E7=BB=84=E4=BB=B6=E5=88=87=E6=8D=A2=E4=BD=86=E6=98=AF?=
 =?UTF-8?q?=E7=9B=91=E6=8E=A7=E5=99=A8=E5=A4=B1=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/itemCenter.vue | 52 ++++++++++++++++++++++++++++++-----
 1 file changed, 45 insertions(+), 7 deletions(-)

diff --git a/src/components/itemCenter.vue b/src/components/itemCenter.vue
index c9c8ab4..6f45317 100644
--- a/src/components/itemCenter.vue
+++ b/src/components/itemCenter.vue
@@ -17,7 +17,7 @@
       :style="{
         width: '100%',
         height: '100%',
-        backgroundColor: '#f0f0f0',
+        backgroundColor: 'parent',
       }"
     ></div>
 
@@ -39,7 +39,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from 'vue'
+import { ref, onMounted, computed, onUnmounted, watch } from 'vue'
 
 const props = defineProps({
   imgUrl: {
@@ -53,14 +53,20 @@ const props = defineProps({
     default: '',
   },
 
-  // 是否启用懒加载
-  lazy: {
+  // 懒加载预加载范围
+  rootMargin: {
+    type: String,
+    default: '100px',
+  },
+
+  // 是否翻转图片
+  flip: {
     type: Boolean,
     default: false,
   },
 
   // 是否启用懒加载
-  flip: {
+  lazy: {
     type: Boolean,
     default: false,
   },
@@ -70,10 +76,17 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+
+  // 新增：父容器显示状态
+  show: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 const containerRef = ref(null)
 const isVisible = ref(false)
+let observer = null
 
 // 是否应该显示图片
 const shouldShowImage = computed(() => {
@@ -100,7 +113,12 @@ const createObserver = () => {
 
   if (!containerRef.value) return
 
-  const observer = new IntersectionObserver(
+  // 清理旧观察者
+  if (observer) {
+    observer.disconnect()
+  }
+
+  observer = new IntersectionObserver(
     (entries) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
@@ -110,7 +128,8 @@ const createObserver = () => {
       })
     },
     {
-      rootMargin: '100px', // 提前100px开始加载
+      rootMargin: props.rootMargin, // 提前100px开始加载
+      threshold: 0,
     },
   )
 
@@ -120,6 +139,25 @@ const createObserver = () => {
 onMounted(() => {
   createObserver()
 })
+
+// 监听 show 属性变化，重新创建观察者
+watch(
+  () => props.show,
+  (newVal) => {
+    if (newVal && props.lazy && !props.immediate) {
+      // 延迟执行，确保 DOM 已渲染
+      setTimeout(() => {
+        createObserver()
+      }, 100)
+    }
+  },
+)
+
+onUnmounted(() => {
+  if (observer) {
+    observer.disconnect()
+  }
+})
 </script>
 
 <style lang="scss" scoped>