A fast, type-safe virtual list component for Vue 3.
<template>
<div>
<VirtualScroller
:default-size="40"
:items="someArrayOfUsers"
>
<template #item="{ ref, offset, index }">
<!-- `ref` is the array item. Thanks to Volar, `ref` has the type `User` here -->
{{ ref.name }}
</template>
</VirtualScroller>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { createVirtualScroller } from 'vue-typed-virtual-list';
type User = {
id: number;
name: string;
phone: string;
};
export default defineComponent({
components: {
// pass the item type as a type parameter to enable type safety in the item slot
VirtualScroller: createVirtualScroller<User>()
},
data: () => ({
someArrayOfUsers: Array
.from(Array(100))
.map((_, i) => ({
id: i + 1,
name: 'Name',
phone: 'Phone'
}))
})
})
</script>
<script setup lang="ts">
import { createVirtualScroller } from 'vue-typed-virtual-list';
const VirtualScroller = createVirtualScroller<User>();
type User = {
id: number;
name: string;
phone: string;
};
const someArrayOfUsers: User[] = Array
.from(Array(100))
.map((_, i) => ({
id: i + 1,
name: 'Name',
phone: 'Phone'
}));
</script>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4