1.0.3

lhlyu · Mar 24, 2024 · 26cb3a8 · 26cb3a8
1 parent eed6d35
commit 26cb3a8
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 40 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -3,7 +3,7 @@ name: Publish Package
 on:
   push:
     branches:
-      - dev
+      - main
 
 jobs:
   publish:

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 1.0.3
+
+### feature
+
+- add a `padding` parameter | 新增一个`padding`参数
+
 ## 1.0.2
 
 ### fix

diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@
 - Local import
 
 ```ts
-import {VirtualWaterfall} from '@lhlyu/vue-virtual-waterfall'
+import { VirtualWaterfall } from '@lhlyu/vue-virtual-waterfall'
 ```
 
 - Global import
@@ -34,13 +34,13 @@ app.use(VueVirtualWaterfall)
 ```vue
 
 <template>
-	<VirtualWaterfall :items="items" :calcItemHeight="calcItemHeight">
-		<template #default="{ item }: { item: ItemOption }">
-			<div class="card">
-				<img :src="item.img"/>
-			</div>
-		</template>
-	</VirtualWaterfall>
+    <VirtualWaterfall :items="items" :calcItemHeight="calcItemHeight">
+        <template #default="{ item }: { item: ItemOption }">
+            <div class="card">
+                <img :src="item.img" />
+            </div>
+        </template>
+    </VirtualWaterfall>
 </template>
 ```
 
@@ -50,7 +50,9 @@ app.use(VueVirtualWaterfall)
 
 ### Attention!!!
 
-**The `VirtualWaterfall` component wants to implement a virtual list, and the container that wraps it must indicate a fixed height. The scrolling event can be bound to this container. If this component is hung under the body, the height of the body also needs to be specified. The scrolling event can be bound to the `window`**
+**The `VirtualWaterfall` component wants to implement a virtual list, and the container that wraps it must indicate a
+fixed height. The scrolling event can be bound to this container. If this component is hung under the body, the height
+of the body also needs to be specified. The scrolling event can be bound to the `window`**
 
 ## Documentation
 
@@ -61,6 +63,7 @@ app.use(VueVirtualWaterfall)
 | virtual            | boolean                                    | true                                    | Enable virtual list                   |
 | rowKey             | string                                     | 'id'                                    | Key for v-for                         |
 | gap                | number                                     | 15                                      | Gap between each item                 |
+| padding            | number                                     | 15                                      | Container's padding                   |
 | preloadScreenCount | `[number, number]`                         | `[0, 0]`                                | Preload screen count `[above, below]` |
 | itemMinWidth       | number                                     | 220                                     | Minimum width for each item           |
 | maxColumnCount     | number                                     | 10                                      | Maximum number of columns             |

diff --git a/README.zh.md b/README.zh.md
@@ -18,7 +18,7 @@
 - 局部引用
 
 ```ts
-import {VirtualWaterfall} from '@lhlyu/vue-virtual-waterfall'
+import { VirtualWaterfall } from '@lhlyu/vue-virtual-waterfall'
 ```
 
 - 全局引用
@@ -34,13 +34,13 @@ app.use(VueVirtualWaterfall)
 ```vue
 
 <template>
-	<VirtualWaterfall :items="items" :calcItemHeight="calcItemHeight">
-		<template #default="{ item }: { item: ItemOption }">
-			<div class="card">
-				<img :src="item.img"/>
-			</div>
-		</template>
-	</VirtualWaterfall>
+    <VirtualWaterfall :items="items" :calcItemHeight="calcItemHeight">
+        <template #default="{ item }: { item: ItemOption }">
+            <div class="card">
+                <img :src="item.img" />
+            </div>
+        </template>
+    </VirtualWaterfall>
 </template>
 ```
 
@@ -50,7 +50,9 @@ app.use(VueVirtualWaterfall)
 
 ### 注意!!!
 
-**`VirtualWaterfall`组件想要实现虚拟列表，包裹它的容器必须指明固定的高度，滚动事件可以绑定在这个容器上，如果这个组件挂在到body下，同样需要指明body的高度，滚动事件可以绑定在`window`上**
+**`VirtualWaterfall`
+组件想要实现虚拟列表，包裹它的容器必须指明固定的高度，滚动事件可以绑定在这个容器上，如果这个组件挂在到body下，同样需要指明body的高度，滚动事件可以绑定在`window`
+上**
 
 ## 文档
 
@@ -61,6 +63,7 @@ app.use(VueVirtualWaterfall)
 | virtual            | boolean                                    | true                                    | 是否启用虚拟列表                  |
 | rowKey             | string                                     | 'id'                                    | v-for需要用到key              |
 | gap                | number                                     | 15                                      | 每个item之间的间隔               |
+| padding            | number                                     | 15                                      | 容器内边距                     |
 | preloadScreenCount | `[number, number]`                         | `[0:0]`                                 | 预加载屏数量`[上面预加载屏数，下面预加载屏数]` |
 | itemMinWidth       | number                                     | 220                                     | 每个item最小宽度                |
 | maxColumnCount     | number                                     | 10                                      | 允许的最大列数                   |

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@lhlyu/vue-virtual-waterfall",
   "description": "vue3 virtual waterfall component",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "author": "lhlyu",
   "repository": {
     "type": "git",
@@ -34,20 +34,20 @@
     "package.json"
   ],
   "dependencies": {
-    "@vueuse/core": "^10.7.1"
+    "@vueuse/core": "^10.9.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.3",
-    "autoprefixer": "^10.4.16",
-    "cssnano": "^6.0.3",
-    "postcss": "^8.4.33",
-    "prettier": "^3.2.1",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "autoprefixer": "^10.4.19",
+    "cssnano": "^6.1.1",
+    "postcss": "^8.4.38",
+    "prettier": "^3.2.5",
     "prettier-plugin-rational-order": "^1.0.3",
-    "sass": "^1.69.7",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.11",
-    "vite-plugin-dts": "^3.7.0",
-    "vue": "^3.4.13",
-    "vue-tsc": "^1.8.27"
+    "sass": "^1.72.0",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.4",
+    "vite-plugin-dts": "^3.7.3",
+    "vue": "^3.4.21",
+    "vue-tsc": "^2.0.7"
   }
 }
diff --git a/src/example/Example.vue b/src/example/Example.vue
@@ -3,6 +3,7 @@
     <VirtualWaterfall
         :virtual="waterfallOption.virtual"
         :gap="waterfallOption.gap"
+        :padding="waterfallOption.padding"
         :preload-screen-count="[waterfallOption.topPreloadScreenCount, waterfallOption.bottomPreloadScreenCount]"
         :item-min-width="waterfallOption.itemMinWidth"
         :max-column-count="waterfallOption.maxColumnCount"
@@ -39,6 +40,25 @@
                     </span>
                 </div>
             </div>
+            <div class="form-group form-group-sm mb-2">
+                <label class="form-label fs-6">填充 <code>[0:100]</code></label>
+                <div class="input-group input-group-sm">
+                    <input
+                        type="number"
+                        class="form-control"
+                        v-model="waterfallOption.padding"
+                        min="0"
+                        max="100"
+                        step="1"
+                    />
+                    <span
+                        class="input-group-text"
+                        id="basic-addon1"
+                    >
+                        px
+                    </span>
+                </div>
+            </div>
             <div class="form-group form-group-sm mb-2">
                 <label class="form-label fs-6">每个元素的最小宽度 <code>[100:600]</code></label>
                 <div class="input-group input-group-sm">

diff --git a/src/example/useWaterfall.ts b/src/example/useWaterfall.ts
@@ -60,6 +60,7 @@ const useWaterfall = () => {
         bottomPreloadScreenCount: 0,
         virtual: true,
         gap: 15,
+        padding: 15,
         itemMinWidth: 220,
         minColumnCount: 2,
         maxColumnCount: 10

diff --git a/src/vue-virtual-waterfall/virtual-waterfall.vue b/src/vue-virtual-waterfall/virtual-waterfall.vue
@@ -4,7 +4,8 @@
         :style="{
             position: 'relative',
             willChange: 'height',
-            height: `${Math.max(...columnsTop)}px`
+            height: `${Math.max(...columnsTop)}px`,
+            padding: `${padding}px`
         }"
     >
         <div
@@ -42,6 +43,8 @@ interface VirtualWaterfallOption {
     rowKey?: string
     // item间隔
     gap?: number
+    // 容器内边距
+    padding?: number
     // 预加载屏数量 [top, bottom]
     preloadScreenCount?: [number, number]
     // item最小宽度
@@ -60,6 +63,7 @@ const props = withDefaults(defineProps<VirtualWaterfallOption>(), {
     virtual: true,
     rowKey: 'id',
     gap: 15,
+    padding: 15,
     preloadScreenCount: () => [0, 0],
     itemMinWidth: 220,
     maxColumnCount: 10,
@@ -90,7 +94,7 @@ const columnCount = computed<number>(() => {
     if (!contentWidth.value) {
         return 0
     }
-    const cWidth = contentWidth.value - props.gap * 2
+    const cWidth = contentWidth.value
     if (cWidth >= props.itemMinWidth * 2) {
         const count = Math.floor(cWidth / props.itemMinWidth)
         if (props.maxColumnCount && count > props.maxColumnCount) {
@@ -102,16 +106,17 @@ const columnCount = computed<number>(() => {
 })
 
 // 每列距离顶部的距离
-const columnsTop = ref(new Array(columnCount.value).fill(props.gap))
+const columnsTop = ref(new Array(columnCount.value).fill(0))
 
 // 计算每个item占据的宽度: (容器宽度 - 间隔) / 列数
 const itemWidth = computed<number>(() => {
     if (!contentWidth.value || columnCount.value <= 0) {
         return 0
     }
-    // 列之间的间隔 和 左右两侧的间隔
-    const gap = (columnCount.value - 1) * props.gap + props.gap * 2
-    return Math.floor((contentWidth.value - gap) / columnCount.value)
+    // 列之间的间隔
+    const gap = (columnCount.value - 1) * props.gap
+    
+    return Math.ceil((contentWidth.value - gap) / columnCount.value)
 })
 
 interface SpaceOption {
@@ -142,7 +147,7 @@ watchEffect(() => {
     if (cache) {
         start = itemSpaces.value.length
     } else {
-        columnsTop.value = new Array(columnCount.value).fill(props.gap)
+        columnsTop.value = new Array(columnCount.value).fill(0)
     }
 
     // 为了高性能采用for-i
@@ -156,12 +161,14 @@ watchEffect(() => {
         // 计算元素的高度
         const h = props.calcItemHeight(props.items[i], itemWidth.value)
         const top = columnsTop.value[columnIndex]
+        const left = (itemWidth.value + props.gap) * columnIndex
+        
         const space: SpaceOption = {
             index: i,
             item: props.items[i],
             column: columnIndex,
             top: top,
-            left: (itemWidth.value + props.gap) * columnIndex + props.gap,
+            left: left,
             bottom: top + h,
             height: h
         }