feat:修改图片

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="">