1.0.4

Author: lhlyu

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.0.4
+
+### feature
+
+- update padding type | 修改`padding`类型
+
 ## 1.0.3
 
 ### feature

README.md

@@ -63,7 +63,7 @@ of the body also needs to be specified. The scrolling event can be bound to the
 | 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                   |
+| padding            | number or string                           | 15 or '15px 20px'                       | 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             |

README.zh.md

@@ -63,7 +63,7 @@ app.use(VueVirtualWaterfall)
 | virtual            | boolean                                    | true                                    | 是否启用虚拟列表                  |
 | rowKey             | string                                     | 'id'                                    | v-for需要用到key              |
 | gap                | number                                     | 15                                      | 每个item之间的间隔               |
-| padding            | number                                     | 15                                      | 容器内边距                     |
+| padding            | number or string                           | 15 or '15px 20px'                       | 容器内边距                     |
 | preloadScreenCount | `[number, number]`                         | `[0:0]`                                 | 预加载屏数量`[上面预加载屏数，下面预加载屏数]` |
 | itemMinWidth       | number                                     | 220                                     | 每个item最小宽度                |
 | maxColumnCount     | number                                     | 10                                      | 允许的最大列数                   |

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lhlyu/vue-virtual-waterfall",
   "description": "vue3 virtual waterfall component",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "author": "lhlyu",
   "repository": {
     "type": "git",

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

@@ -5,7 +5,7 @@
             position: 'relative',
             willChange: 'height',
             height: `${Math.max(...columnsTop)}px`,
-            padding: `${padding}px`
+            padding: `${isNumber(padding) ? padding + 'px' : padding}`
         }"
     >
         <div
@@ -44,7 +44,7 @@ interface VirtualWaterfallOption {
     // item间隔
     gap?: number
     // 容器内边距
-    padding?: number
+    padding?: number | string
     // 预加载屏数量 [top, bottom]
     preloadScreenCount?: [number, number]
     // item最小宽度
@@ -89,6 +89,10 @@ onMounted(() => {
     }
 })
 
+function isNumber(value) {
+    return Object.prototype.toString.call(value) === '[object Number]';
+}
+
 // 计算列数
 const columnCount = computed<number>(() => {
     if (!contentWidth.value) {