diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 28cf293..227bcdb 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -11,7 +11,7 @@ jobs: environment: Release steps: - name: Checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: Install pnpm uses: pnpm/action-setup@v2 @@ -22,7 +22,7 @@ jobs: run: pnpm i --no-frozen-lockfile --shamefully-hoist - name: Use Node.js - uses: actions/setup-node@v3 + uses: actions/setup-node@v4 with: node-version: 18 registry-url: 'https://registry.npmjs.org/' diff --git a/.prettierignore b/.prettierignore index 4a5efac..e76a3b6 100644 --- a/.prettierignore +++ b/.prettierignore @@ -4,6 +4,7 @@ *.toal *.ini *.html +*.md .idea node_modules test diff --git a/.prettierrc.json b/.prettierrc.json index d4a77a1..586b1fa 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -4,10 +4,12 @@ "semi": false, "singleQuote": true, "bracketSpacing": true, - "jsxBracketSameLine": true, + "bracketSameLine": true, "printWidth": 320, "trailingComma": "none", "arrowParens": "avoid", + "vueIndentScriptAndStyle": false, + "singleAttributePerLine": false, "plugins": [ "prettier-plugin-rational-order" ] diff --git a/README.md b/README.md index 00eeb31..e961a83 100644 --- a/README.md +++ b/README.md @@ -46,37 +46,38 @@ app.use(VueVirtualWaterfall) - Properties -| Field | Type | Default Value | Description | -|--------------------|------------------------------------------|---------------------------------------|-------------------------------------------------| -| rowKey | string | 'id' | Key used for v-for loop | -| gap | number | 15 | Gap between each item | -| contentMaxWidth | string or number | '100%' | Maximum width of the content | -| preloadScreenCount | number | 1 | Number of screens to preload | -| bottomDistance | number | 2000 | Distance from bottom to trigger load more event | -| itemMinWidth | number | 250 | Minimum width of each item | -| maxColumnCount | number | | Maximum number of columns, no limit by default | -| minColumnCount | number | 2 | Minimum number of columns | -| loading | boolean | false | Whether data is loading | -| items | any[] | [] | Data | -| calcItemHeight | (item: any, itemWidth: number) => number | (item: any, itemWidth: number) => 250 | Method to calculate item height | +| Field | Type | Default Value | Description | +|--------------------|--------------------------------------------|-----------------------------------------|-------------------------------------------------| +| height | string | '100vh' | Container height | +| rowKey | string | 'id' | Key used for v-for loop | +| gap | number | 15 | Gap between each item | +| contentMaxWidth | string or number | '100%' | Maximum width of the content | +| preloadScreenCount | number | 1 | Number of screens to preload | +| bottomDistance | number | 250 | Distance from bottom to trigger load more event | +| itemMinWidth | number | 250 | Minimum width of each item | +| maxColumnCount | number | | Maximum number of columns, no limit by default | +| minColumnCount | number | 2 | Minimum number of columns | +| loading | boolean | false | Whether data is loading | +| items | any[] | [] | Data | +| calcItemHeight | `(item: any, itemWidth: number) => number` | `(item: any, itemWidth: number) => 250` | Method to calculate item height | - Slots -| Name | Type | Description | -|---------|------------------------------|--------------------| -| default | { item: any, index: number } | Customized content | +| Name | Type | Description | +|---------|--------------------------------|--------------------| +| default | `{ item: any, index: number }` | Customized content | - Events -| Event | Type | Description | -|-----------|------------|-----------------| -| load-more | () => void | Load more event | +| Event | Type | Description | +|-----------|--------------|-----------------| +| load-more | `() => void` | Load more event | - Exposed Methods -| Method | Type | Description | -|---------|------------|---------------| -| backTop | () => void | Scroll to top | +| Method | Type | Description | +|---------|--------------|---------------| +| backTop | `() => void` | Scroll to top | ## Performance @@ -91,5 +92,8 @@ app.use(VueVirtualWaterfall) - [vue-masonry-css](https://github.com/paulcollett/vue-masonry-css) - [Optimization of Waterfall Virtual List](https://juejin.cn/post/7166071557284954142) - [PixivCollection](https://github.com/orilights/PixivCollection) +- [v3-waterfall](https://github.com/gk-shi/v3-waterfall) +- [scroll](https://juejin.cn/post/6844903493677875214?from=search-suggest) +- [scroll-event](https://ayase.moe/2018/11/20/scroll-event/) - [Cache Settings](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/?utm_source=lighthouse&utm_medium=lr) diff --git a/README.zh.md b/README.zh.md index be506f7..5a5fe49 100644 --- a/README.zh.md +++ b/README.zh.md @@ -46,37 +46,38 @@ app.use(VueVirtualWaterfall) - 属性 -| 字段 | 类型 | 默认值 | 说明 | -|--------------------|------------------------------------------|---------------------------------------|-----------------| -| rowKey | string | 'id' | v-for需要用到key | -| gap | number | 15 | 每个item之间的间隔 | -| contentMaxWidth | string or number | '100%' | 内容最大宽度 | -| 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) => 250 | 计算item高度的方法 | +| 字段 | 类型 | 默认值 | 说明 | +|--------------------|--------------------------------------------|-----------------------------------------|-----------------| +| height | string | '100vh' | 容器的高度 | +| rowKey | string | 'id' | v-for需要用到key | +| gap | number | 15 | 每个item之间的间隔 | +| contentMaxWidth | string or number | '100%' | 内容最大宽度 | +| preloadScreenCount | number | 1 | 预加载屏数量 | +| bottomDistance | number | 250 | 距离底部多少时触发加载更多事件 | +| itemMinWidth | number | 250 | 每个item最小宽度 | +| maxColumnCount | number | | 允许的最大列数，默认没有限制 | +| minColumnCount | number | 2 | 允许的最小列数 | +| loading | boolean | false | 是否正在加载数据 | +| items | any[] | [] | 数据 | +| calcItemHeight | `(item: any, itemWidth: number) => number` | `(item: any, itemWidth: number) => 250` | 计算item高度的方法 | - 插槽 -| 事件 | 类型 | 说明 | -|---------|------------------------------|---------| -| default | { item: any, index: number } | 自定义默认内容 | +| 事件 | 类型 | 说明 | +|---------|--------------------------------|---------| +| default | `{ item: any, index: number }` | 自定义默认内容 | - 事件 -| 事件 | 类型 | 说明 | -|-----------|------------|------| -| load-more | () => void | 加载更多 | +| 事件 | 类型 | 说明 | +|-----------|--------------|------| +| load-more | `() => void` | 加载更多 | - 暴露的方法 -| 方法 | 类型 | 说明 | -|---------|------------|-------| -| backTop | () => void | 滚动到顶部 | +| 方法 | 类型 | 说明 | +|---------|--------------|-------| +| backTop | `() => void` | 滚动到顶部 | ## 性能 @@ -91,5 +92,7 @@ app.use(VueVirtualWaterfall) - [vue-masonry-css](https://github.com/paulcollett/vue-masonry-css) - [瀑布流虚拟列表优化](https://juejin.cn/post/7166071557284954142) - [PixivCollection](https://github.com/orilights/PixivCollection) - +- [v3-waterfall](https://github.com/gk-shi/v3-waterfall) +- [滚动优化](https://juejin.cn/post/6844903493677875214?from=search-suggest) +- [scroll-event](https://ayase.moe/2018/11/20/scroll-event/) - [缓存设置](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/?utm_source=lighthouse&utm_medium=lr) diff --git a/package.json b/package.json index 9883c12..5f973f2 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@lhlyu/vue-virtual-waterfall", "description": "vue3 virtual waterfall component", - "version": "0.0.13", + "version": "0.0.14-beta.0", "author": "lhlyu", "repository": { "type": "git", @@ -33,27 +33,27 @@ "package.json" ], "dependencies": { - "@vueuse/core": "^10.5.0", - "vue": "^3.3.7" + "@vueuse/core": "^10.6.1" }, "devDependencies": { - "@arco-design/web-vue": "^2.52.1", - "@types/mockjs": "^1.0.9", - "@vitejs/plugin-vue": "^4.4.0", - "@vitejs/plugin-vue-jsx": "^3.0.2", + "@arco-design/web-vue": "^2.53.2", + "@types/mockjs": "^1.0.10", + "@vitejs/plugin-vue": "^4.5.0", + "@vitejs/plugin-vue-jsx": "^3.1.0", "autoprefixer": "^10.4.16", "cssnano": "^6.0.1", "mockjs": "^1.1.0", "postcss": "^8.4.31", - "prettier": "^3.0.3", + "prettier": "^3.1.0", "prettier-plugin-rational-order": "^1.0.3", "sass": "^1.69.5", "typescript": "^5.2.2", "unplugin-auto-import": "^0.16.7", "unplugin-vue-components": "^0.25.2", - "vite": "^4.5.0", + "vite": "^5.0.0", "vite-plugin-css-injected-by-js": "^3.3.0", - "vite-plugin-dts": "^3.6.2", + "vite-plugin-dts": "^3.6.3", + "vue": "^3.3.8", "vue-tsc": "^1.8.22" } } diff --git a/src/example.vue b/src/example.vue index 1456fbf..c99529a 100644 --- a/src/example.vue +++ b/src/example.vue @@ -28,7 +28,7 @@ interface ItemOption { const data = reactive({ items: [] as ItemOption[], page: 1, - size: 80, + size: 50, loading: false }) @@ -66,7 +66,7 @@ const calcItemHeight = (item: ItemOption, itemWidth: number): number => { let height = 0 // 如果存在文本则添加一点高度 if (item.text.length && cfg.showText) { - height = 100 + height = 150 } // 按比例 switch (cfg.itemHeight) { diff --git a/src/vue-virtual-waterfall/index.ts b/src/vue-virtual-waterfall/index.ts index d4bfb9f..b6ca27c 100644 --- a/src/vue-virtual-waterfall/index.ts +++ b/src/vue-virtual-waterfall/index.ts @@ -9,6 +9,7 @@ export default { } } +// 全局引入时，需要声明一下全局组件，不然没有提示 declare module 'vue' { export interface GlobalComponents { VirtualWaterfall: typeof VirtualWaterfall diff --git a/src/vue-virtual-waterfall/virtual-waterfall.vue b/src/vue-virtual-waterfall/virtual-waterfall.vue index 9c829fe..d0ee849 100644 --- a/src/vue-virtual-waterfall/virtual-waterfall.vue +++ b/src/vue-virtual-waterfall/virtual-waterfall.vue @@ -1,5 +1,10 @@