Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lhlyu/vue-virtual-waterfall
vue3 virtual waterfall component（Vue3虚拟瀑布流组件）
https://github.com/lhlyu/vue-virtual-waterfall
component typescript virtual-list vite vue vue-component vue3 vueuse waterfall
Last synced: about 2 months ago
JSON representation
vue3 virtual waterfall component（Vue3虚拟瀑布流组件）
- Host: GitHub
- URL: https://github.com/lhlyu/vue-virtual-waterfall
- Owner: lhlyu
- License: mit
- Created: 2023-07-01T13:52:53.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-04-10T16:17:59.000Z (about 2 months ago)
- Last Synced: 2024-04-10T20:04:50.020Z (about 2 months ago)
- Topics: component, typescript, virtual-list, vite, vue, vue-component, vue3, vueuse, waterfall
- Language: Vue
- Homepage: https://waterfall.tatakai.top
- Size: 3.03 MB
- Stars: 65
- Watchers: 2
- Forks: 12
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-vue - vue-virtual-waterfall - A virtual waterfall component for Vue 3.x. (Components & Libraries / UI Layout)
- awesome-vue-3 - Vue Virtual Waterfall - A vue3 virtual waterfall component (Packages)
README
# vue-virtual-waterfall
> A Vue 3 virtual waterfall component
[中文文档](./README.zh.md)
## Example
- [Example](https://waterfall.tatakai.top)
- [Example Source Code](./src/example/Example.vue)
## Usage
> pnpm add @lhlyu/vue-virtual-waterfall
- Local import
```ts
import { VirtualWaterfall } from '@lhlyu/vue-virtual-waterfall'
```
- Global import
```ts
import VueVirtualWaterfall from '@lhlyu/vue-virtual-waterfall'
app.use(VueVirtualWaterfall)
```
- Usage
```vue
![]()
```
- Nuxt3 Usage
[demo](https://stackblitz.com/edit/waterfall-nuxt)
### 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`**
## Documentation
- Properties
| Field | Type | Default | Description |
|--------------------|--------------------------------------------|-----------------------------------------|---------------------------------------|
| virtual | boolean | true | Enable virtual list |
| rowKey | string | 'id' | Key for v-for |
| gap | number | 15 | Gap between each item |
| padding | number or string | 15 or '15px 15px' | 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 |
| minColumnCount | number | 2 | Minimum number of columns |
| items | any[] | [] | Data |
| calcItemHeight | `(item: any, itemWidth: number) => number` | `(item: any, itemWidth: number) => 250` | Method to calculate item height |
- Slots
| Event | Type | Description |
|---------|--------------------------------|------------------------|
| default | `{ item: any, index: number }` | Custom default content |