140 lines
4.1 KiB
Vue
140 lines
4.1 KiB
Vue
<template>
|
|
<DocSectionText v-bind="$attrs" />
|
|
<div class="card flex justify-center">
|
|
<Select
|
|
v-model="selectedItem"
|
|
:options="items"
|
|
optionLabel="label"
|
|
optionValue="value"
|
|
:virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }"
|
|
placeholder="Select Item"
|
|
class="w-full md:w-56"
|
|
/>
|
|
</div>
|
|
<DocSectionCode :code="code" />
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
selectedItem: null,
|
|
items: Array.from({ length: 100000 }),
|
|
loading: false,
|
|
code: {
|
|
basic: `
|
|
<Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-56"
|
|
:virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
|
|
`,
|
|
options: `
|
|
<template>
|
|
<div class="card flex justify-center">
|
|
<Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-56"
|
|
:virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
selectedItem: null,
|
|
items: Array.from({ length: 100000 }),
|
|
loading: false
|
|
};
|
|
},
|
|
loadLazyTimeout: null,
|
|
methods: {
|
|
onLazyLoad(event) {
|
|
this.loading = true;
|
|
|
|
if (this.loadLazyTimeout) {
|
|
clearTimeout(this.loadLazyTimeout);
|
|
}
|
|
|
|
//imitate delay of a backend call
|
|
this.loadLazyTimeout = setTimeout(() => {
|
|
const { first, last } = event;
|
|
const _items = [...this.items];
|
|
|
|
for (let i = first; i < last; i++) {
|
|
_items[i] = { label: \`Item #\${i}\`, value: i };
|
|
}
|
|
|
|
this.items = _items;
|
|
this.loading = false;
|
|
}, Math.random() * 1000 + 250);
|
|
}
|
|
}
|
|
};
|
|
<\/script>
|
|
`,
|
|
composition: `
|
|
<template>
|
|
<div class="card flex justify-center">
|
|
<Select v-model="selectedItem" :options="items" optionLabel="label" optionValue="value" class="w-full md:w-56"
|
|
:virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 38, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
const selectedItem = ref();
|
|
const items = ref(Array.from({ length: 100000 }));
|
|
const loading = ref(false);
|
|
const loadLazyTimeout = ref();
|
|
const onLazyLoad = (event) => {
|
|
loading.value = true;
|
|
|
|
if (loadLazyTimeout.value) {
|
|
clearTimeout(loadLazyTimeout.value);
|
|
}
|
|
|
|
//imitate delay of a backend call
|
|
loadLazyTimeout.value = setTimeout(() => {
|
|
const { first, last } = event;
|
|
const _items = [...items.value];
|
|
|
|
for (let i = first; i < last; i++) {
|
|
_items[i] = { label: \`Item #\${i}\`, value: i };
|
|
}
|
|
|
|
items.value = _items;
|
|
loading.value = false;
|
|
}, Math.random() * 1000 + 250);
|
|
}
|
|
<\/script>
|
|
`
|
|
}
|
|
};
|
|
},
|
|
loadLazyTimeout: null,
|
|
methods: {
|
|
onLazyLoad(event) {
|
|
this.loading = true;
|
|
|
|
if (this.loadLazyTimeout) {
|
|
clearTimeout(this.loadLazyTimeout);
|
|
}
|
|
|
|
//imitate delay of a backend call
|
|
this.loadLazyTimeout = setTimeout(
|
|
() => {
|
|
const { first, last } = event;
|
|
const items = [...this.items];
|
|
|
|
for (let i = first; i < last; i++) {
|
|
items[i] = { label: `Item #${i}`, value: i };
|
|
}
|
|
|
|
this.items = items;
|
|
this.loading = false;
|
|
},
|
|
Math.random() * 1000 + 250
|
|
);
|
|
}
|
|
}
|
|
};
|
|
</script>
|