0.0.7

lhlyu · Jul 27, 2023 · 4d44cb3 · 4d44cb3
1 parent e122fc4
commit 4d44cb3
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -14,20 +14,21 @@
 - 局部引用
 
 ```ts
-import { VirtualWaterfall } from '@lhlyu/vue-virtual-waterfall'
+import {VirtualWaterfall} from '@lhlyu/vue-virtual-waterfall'
 ```
 
 - 全局引用
 
 ```ts
-import VueVirtualWaterfall from '@lhlyu/vue-virtual-waterfall' 
+import VueVirtualWaterfall from '@lhlyu/vue-virtual-waterfall'
 
 app.use(VueVirtualWaterfall)
 ```
 
 - 使用
 
 ```vue
+
 <template>
   <VirtualWaterfall :items="items" :calcItemHeight="calcItemHeight" :loading="loading" @load-more="loadMoreData">
     <template #default="{ item }: { item: ItemOption }">
@@ -51,6 +52,8 @@ app.use(VueVirtualWaterfall)
 | preloadScreenCount | number                                   | 1                                   | 预加载屏数量          |
 | bottomDistance     | number                                   | 2000                                | 距离底部多少时触发加载更多事件 |
 | itemMinWidth       | number                                   | 250                                 | 每个item最小宽度      |
+| maxColumnCount     | number                                   |                                     | 允许的最大列数，默认没有限制  |
+| minColumnCount     | number                                   | 2                                   | 允许的最小列数         |
 | 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
@@ -1,12 +1,13 @@
 {
   "name": "@lhlyu/vue-virtual-waterfall",
   "description": "vue3 virtual waterfall component",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "author": "lhlyu",
   "repository": {
     "type": "git",
     "url": "https://github.com/lhlyu/vue-virtual-waterfall.git"
   },
+  "license": "MIT",
   "type": "module",
   "scripts": {
     "fmt": "prettier --write .",

diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
     <main>
-        <VirtualWaterfall :items="data.items" :calcItemHeight="calcItemHeight" :loading="data.loading" contentMaxWidth="1000px" ref="vw" @load-more="loadMoreData">
+        <VirtualWaterfall :items="data.items" :calcItemHeight="calcItemHeight" :loading="data.loading" :content-max-width="1000" ref="vw" @load-more="loadMoreData">
             <template #default="{ item }: { item: ItemOption }">
                 <Card :id="item.id" :img="item.img" :color="item.dominant" :has="loadedItemIds.has(item.id)" @loaded="loaded"></Card>
             </template>

diff --git a/src/vue-virtual-waterfall/virtual-waterfall.vue b/src/vue-virtual-waterfall/virtual-waterfall.vue
@@ -46,6 +46,10 @@ interface VirtualWaterfallOption {
     contentMaxWidth?: string | number
     // item最小宽度
     itemMinWidth?: number
+    // 最大列数
+    maxColumnCount?: number
+    // 最小列数
+    minColumnCount?: number
     // 是否正在加载数据
     loading?: boolean
     // 数据
@@ -61,6 +65,7 @@ const props = withDefaults(defineProps<VirtualWaterfallOption>(), {
     bottomDistance: 2000,
     contentMaxWidth: '100%',
     itemMinWidth: 250,
+    minColumnCount: 2,
     loading: false,
     items: () => [],
     calcItemHeight: (item: any, itemWidth: number) => 0
@@ -109,9 +114,13 @@ const columnCount = computed<number>(() => {
     }
     const cWidth = contentWidth.value + props.gap * 2
     if (cWidth >= props.itemMinWidth * 2) {
-        return Math.ceil(cWidth / props.itemMinWidth)
+        const count = Math.ceil(cWidth / props.itemMinWidth)
+        if (props.maxColumnCount && count > props.maxColumnCount) {
+            return props.maxColumnCount
+        }
+        return count
     }
-    return 2
+    return props.minColumnCount
 })
 
 // 每列距离顶部的距离