0.0.16

lhlyu · Dec 10, 2023 · 2cfccc1 · 2cfccc1
1 parent 095f60e
commit 2cfccc1
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@
 - Local Import
 
 ```ts
-import { VirtualWaterfall } from '@lhlyu/vue-virtual-waterfall'
+import {VirtualWaterfall} from '@lhlyu/vue-virtual-waterfall'
 ```
 
 - Global Import
@@ -48,6 +48,7 @@ app.use(VueVirtualWaterfall)
 
 | Field              | Type                                       | Default Value                           | Description                                     |
 |--------------------|--------------------------------------------|-----------------------------------------|-------------------------------------------------|
+| virtual            | boolean                                    | true                                    | Enable virtual list                             |
 | height             | string                                     | '100vh'                                 | Container height                                |
 | rowKey             | string                                     | 'id'                                    | Key used for v-for loop                         |
 | gap                | number                                     | 15                                      | Gap between each item                           |

diff --git a/README.zh.md b/README.zh.md
@@ -48,6 +48,7 @@ app.use(VueVirtualWaterfall)
 
 | 字段                 | 类型                                         | 默认值                                     | 说明              |
 |--------------------|--------------------------------------------|-----------------------------------------|-----------------|
+| virtual            | boolean                                    | true                                    | 是否启用虚拟列表        |
 | height             | string                                     | '100vh'                                 | 容器的高度           |
 | rowKey             | string                                     | 'id'                                    | v-for需要用到key    |
 | gap                | number                                     | 15                                      | 每个item之间的间隔     |

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@lhlyu/vue-virtual-waterfall",
   "description": "vue3 virtual waterfall component",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "author": "lhlyu",
   "repository": {
     "type": "git",
@@ -33,32 +33,32 @@
     "package.json"
   ],
   "dependencies": {
-    "@vueuse/core": "^10.6.1"
+    "@vueuse/core": "^10.7.0"
   },
   "devDependencies": {
-    "@opentiny/vue-button": "^3.11.0",
-    "@opentiny/vue-form": "^3.11.1",
-    "@opentiny/vue-form-item": "^3.11.0",
-    "@opentiny/vue-icon": "^3.11.0",
-    "@opentiny/vue-numeric": "^3.11.0",
-    "@opentiny/vue-split": "^3.11.0",
-    "@opentiny/vue-switch": "^3.11.0",
+    "@opentiny/vue-button": "^3.12.0",
+    "@opentiny/vue-form": "^3.12.0",
+    "@opentiny/vue-form-item": "^3.12.0",
+    "@opentiny/vue-icon": "^3.12.0",
+    "@opentiny/vue-numeric": "^3.12.0",
+    "@opentiny/vue-split": "^3.12.0",
+    "@opentiny/vue-switch": "^3.12.0",
     "@types/mockjs": "^1.0.10",
-    "@types/node": "^20.9.4",
-    "@vitejs/plugin-vue": "^4.5.0",
+    "@types/node": "^20.10.4",
+    "@vitejs/plugin-vue": "^4.5.2",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "autoprefixer": "^10.4.16",
     "cssnano": "^6.0.1",
     "mockjs": "^1.1.0",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.32",
     "prettier": "^3.1.0",
     "prettier-plugin-rational-order": "^1.0.3",
     "sass": "^1.69.5",
-    "typescript": "^5.3.2",
-    "vite": "^5.0.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.7",
     "vite-plugin-css-injected-by-js": "^3.3.0",
-    "vite-plugin-dts": "^3.6.3",
-    "vue": "^3.3.8",
-    "vue-tsc": "^1.8.22"
+    "vite-plugin-dts": "^3.6.4",
+    "vue": "^3.3.11",
+    "vue-tsc": "^1.8.25"
   }
 }
diff --git a/src/example/Example.vue b/src/example/Example.vue
@@ -3,6 +3,7 @@
         <template #left>
             <VirtualWaterfall
                 ref="vm"
+                :virtual="waterfallOption.virtual"
                 :loading="waterfallOption.loading"
                 :gap="waterfallOption.gap"
                 :bottom-distance="waterfallOption.bottomDistance"
@@ -38,6 +39,9 @@
                     <TinyFormItem label="仅展示图片">
                         <TinySwitch v-model="waterfallOption.onlyImage"></TinySwitch>
                     </TinyFormItem>
+                    <TinyFormItem label="虚拟列表">
+                        <TinySwitch v-model="waterfallOption.virtual"></TinySwitch>
+                    </TinyFormItem>
                     <TinyFormItem label="数据统计">
                         <p>当前页码: {{ data.page }} / {{ data.max }}</p>
                         <p>已加载量: {{ data.list.length }} / {{ data.total }}</p>

diff --git a/src/example/useWaterfall.ts b/src/example/useWaterfall.ts
@@ -50,6 +50,7 @@ const useWaterfall = () => {
     // 瀑布流的一些属性
     const waterfallOption = reactive({
         loading: false,
+        virtual: true,
         gap: 15,
         bottomDistance: 250,
         itemMinWidth: 250,

diff --git a/src/vue-virtual-waterfall/virtual-waterfall.vue b/src/vue-virtual-waterfall/virtual-waterfall.vue
@@ -38,6 +38,8 @@ defineOptions({
 })
 
 interface VirtualWaterfallOption {
+    // 是否启用虚拟列表
+    virtual?: boolean
     // 容器的高度
     height?: string
     rowKey?: string
@@ -64,6 +66,7 @@ interface VirtualWaterfallOption {
 }
 
 const props = withDefaults(defineProps<VirtualWaterfallOption>(), {
+    virtual: true,
     height: '100vh',
     rowKey: 'id',
     gap: 15,
@@ -209,6 +212,9 @@ const itemRenderList = computed<SpaceOption[]>(() => {
     if (!length) {
         return []
     }
+    if (!props.virtual) {
+        return itemSpaces.value
+    }
     const top = -contentTop.value
     const preloadScreenCount = props.preloadScreenCount
     // 避免多次访问