From 4f47a82f27ec6b0f20b4cd7d3d872c34fe563ba4 Mon Sep 17 00:00:00 2001
From: raofuzi <2641346316@qq.com>
Date: Thu, 18 Apr 2024 08:14:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E4=BF=AE=E6=94=B9=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home/content/Content.vue | 43 ++++++++++++++++++++----------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/views/home/content/Content.vue b/src/views/home/content/Content.vue
index 1f2a046..c346723 100644
--- a/src/views/home/content/Content.vue
+++ b/src/views/home/content/Content.vue
@@ -115,20 +115,20 @@ const layout = debounce(() => {
     percentPosition: true,
     stagger: 10,
   })
+  loading.value = false
+  // _imagesload = imagesloaded('.grid-item')
 
-  _imagesload = imagesloaded('.grid-item')
-
-  _imagesload.on('done', (instance) => {
-    (_masonry as any).layout()
-    if (!el.value)
-      return
-    loading.value = false
-  })
+  // _imagesload.on('done', (instance) => {
+  //   (_masonry as any).layout()
+  //   if (!el.value)
+  //     return
+  //   loading.value = false
+  // })
 
-  _imagesload.on('fail', (instance) => {
-    message.error('图片错误')
-    loading.value = false
-  })
+  // _imagesload.on('fail', (instance) => {
+  //   message.error('图片错误')
+  //   loading.value = false
+  // })
 }, 300)
 
 useInfiniteScroll(
@@ -295,6 +295,16 @@ const gridHeight = computed(() => {
   return height
 })
 
+const gridMinHeight = computed(() => {
+  let height = ''
+  if (viewMode.value === 'masonry' && loading.value)
+    height = '145px'
+  else 
+    height = ''
+
+  return height
+})
+
 async function oneCheck() {
   const asideVal = cloneDeep(configStore.getAsideValue)
   asideVal.upUserName = searchValue.value
@@ -699,7 +709,7 @@ defineExpose({
             <div
               v-for="(item, index) in listData"
               :key="index"
-              :style="{ height: gridHeight }"
+              :style="{ height: gridHeight, minHeight: gridMinHeight }"
               class="grid-item"
             >
               <!-- <div :style="{ 'background-color': randomColor(0.2) }" class="wrapper-content-item-img" /> -->
@@ -726,7 +736,12 @@ defineExpose({
                 :fallback-src="bgLoadingImg"
                 style="display: none"
               />
-              <img v-lazy="item.thumburl" class="img" :class="{
+              <img @click="
+                      ($event) => {
+                        previewHandler(index, $event);
+                        hideDownload($event);
+                      }
+                    " v-lazy="item.thumburl" class="img" :class="{
                   'img-fit': viewMode === 'horizontalVersion',
                   'img-full': viewMode === '3:4' || viewMode === 'verticalVersion',
                 }" alt="">