0.0.13

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lhlyu/vue-virtual-waterfall",
   "description": "vue3 virtual waterfall component",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "author": "lhlyu",
   "repository": {
     "type": "git",
@@ -53,7 +53,7 @@
     "unplugin-vue-components": "^0.25.2",
     "vite": "^4.5.0",
     "vite-plugin-css-injected-by-js": "^3.3.0",
-    "vite-plugin-dts": "^3.6.1",
-    "vue-tsc": "^1.8.21"
+    "vite-plugin-dts": "^3.6.2",
+    "vue-tsc": "^1.8.22"
   }
 }

src/vue-virtual-waterfall/virtual-waterfall.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watchEffect } from 'vue'
+import {computed, onMounted, ref, watchEffect} from 'vue'
 import { useElementBounding, useThrottle, useElementSize, useInfiniteScroll } from '@vueuse/core'
 
 defineOptions({
@@ -107,6 +107,15 @@ const { width } = useElementSize(content)
 const { top } = useElementBounding(content)
 const contentWidth = useThrottle(width, 500)
 const contentTop = useThrottle(top, 125)
+
+onMounted(() => {
+    // 这里是为了解决这个问题:
+    // https://github.com/lhlyu/vue-virtual-waterfall/issues/5
+    if (contentWidth.value === 0) {
+        contentWidth.value = Number.parseInt(window.getComputedStyle(content.value).width)
+    }
+})
+
 // 计算列数
 const columnCount = computed<number>(() => {
     if (!contentWidth.value) {