From 6a22379fa7be16ee8d6c76acd85397496c61698e Mon Sep 17 00:00:00 2001
From: lhlyu <misakafs@gmail.com>
Date: Tue, 4 Jul 2023 07:00:15 +0800
Subject: [PATCH] update

---
 .github/workflows/publish.yml                  |  2 +-
 README.md                                      |  2 +-
 package.json                                   |  2 +-
 src/App.vue                                    | 11 +++++++++--
 src/card.vue                                   | 18 ++++++++++++++++--
 .../virtual-waterfall.vue                      |  2 +-
 6 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 1db09ac..edf4841 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -3,7 +3,7 @@ name: Publish Package
 on:
   push:
     branches:
-      - master
+      - main
 
 jobs:
   publish:
diff --git a/README.md b/README.md
index 89a60f8..dbf9eb8 100644
--- a/README.md
+++ b/README.md
@@ -55,7 +55,7 @@ app.use(VueVirtualWaterfall)
 | contentMaxWidth    | string or number                         | '100%'                              | 内容最大宽度            |
 | preloadScreenCount | number                                   | 1                                   | 预加载屏数量          |
 | bottomDistance     | number                                   | 2000                                | 距离底部多少时触发加载更多事件 |
-| itemMinWidth       | number                                   | 320                                 | 每个item最小宽度      |
+| itemMinWidth       | number                                   | 280                                 | 每个item最小宽度      |
 | loading            | boolean                                  | false                               | 是否正在加载数据        |
 | items              | any[]                                    | []                                  | 数据              |
 | calcItemHeight     | (item: any, itemWidth: number) => number | (item: any, itemWidth: number) => 0 | 计算item高度的方法     |
diff --git a/package.json b/package.json
index 43acab2..1934fdb 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@lhlyu/vue-virtual-waterfall",
   "description": "vue3 virtual waterfall component",
-  "version": "0.0.2-beta.1",
+  "version": "0.0.2-beta.2",
   "author": "lhlyu",
   "repository": {
     "type": "git",
diff --git a/src/App.vue b/src/App.vue
index d0e7e02..a49e54b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
     <main>
         <VirtualWaterfall :items="data.items" :calcItemHeight="calcItemHeight" :loading="data.loading" contentMaxWidth="1000px" ref="vw" @load-more="loadMoreData">
             <template #default="{ item }">
-                <Card :id="item.id" :img="item.img"></Card>
+                <Card :id="item.id" :img="item.img" :has="loadedItemIds.has(item.id)" @loaded="loaded"></Card>
             </template>
         </VirtualWaterfall>
     </main>
@@ -22,12 +22,19 @@ interface ItemOption {
 }
 
 const data = reactive({
-    items: [],
+    items: [] as ItemOption[],
     page: 1,
     size: 80,
     loading: false
 })
 
+const loadedItemIds = new Set<string>()
+
+const loaded = (id: string) => {
+    loadedItemIds.add(id)
+}
+
+
 const loadMoreData = async () => {
     if (data.loading) {
         return
diff --git a/src/card.vue b/src/card.vue
index 9029738..e5d1706 100644
--- a/src/card.vue
+++ b/src/card.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="card">
-        <img :class="{ 'img-loaded': loaded }" :src="img" :alt="id" loading="lazy" @load="loaded = true" />
+        <img :class="{ 'img-loaded': loaded }" :src="img" :alt="id" loading="lazy" @load="handlerLoad" />
     </div>
 </template>
 
@@ -15,10 +15,24 @@ const props = defineProps({
     img: {
         type: String,
         default: ''
+    },
+    has: {
+        type: Boolean,
+        default: false
     }
 })
 
-const loaded = ref(false)
+const loaded = ref(props.has)
+
+const emit = defineEmits(['loaded'])
+
+const handlerLoad = () => {
+    if (props.has) {
+        return
+    }
+    loaded.value = true
+    emit('loaded', props.id)
+}
 </script>
 
 <style scoped lang="scss">
diff --git a/src/vue-virtual-waterfall/virtual-waterfall.vue b/src/vue-virtual-waterfall/virtual-waterfall.vue
index 1f7bbb8..0ff9cfd 100644
--- a/src/vue-virtual-waterfall/virtual-waterfall.vue
+++ b/src/vue-virtual-waterfall/virtual-waterfall.vue
@@ -60,7 +60,7 @@ const props = withDefaults(defineProps<VirtualWaterfallOption>(), {
     preloadScreenCount: 1,
     bottomDistance: 2000,
     contentMaxWidth: '100%',
-    itemMinWidth: 320,
+    itemMinWidth: 280,
     loading: false,
     items: () => [],
     calcItemHeight: (item: any, itemWidth: number) => 0