mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-07 07:12:23 +03:00
Jeff Sagal
223f3a6d85
commit8c3a1b107bAuthor: Jeff Sagal <sagalbot@gmail.com> Date: Fri Jul 15 09:57:37 2022 -0700 bump to vitepress 1.0.0-alpha.4 commit96ff08406cAuthor: Jeff Sagal <sagalbot@gmail.com> Date: Wed Feb 23 10:25:36 2022 -0800 vitepress wip mostly working, feeling like vuepress should still be considered commitf3e22e0439Author: Jeff Sagal <sagalbot@gmail.com> Date: Sat Feb 19 17:18:30 2022 -0800 remove yarn, rename readme commit8cd3bbeb51Author: Jeff Sagal <sagalbot@gmail.com> Date: Sat Feb 19 17:17:22 2022 -0800 install vitepress
28 lines
1.3 KiB
Markdown
28 lines
1.3 KiB
Markdown
<script setup>
|
|
import InfiniteScroll from '@/components/InfiniteScroll.vue'
|
|
</script>
|
|
|
|
Vue Select doesn't ship with first party support for infinite scroll, but it's possible to implement
|
|
by hooking into the `open`, `close`, and `search` events, along with the `filterable` prop, and the
|
|
`list-footer` slot.
|
|
|
|
Let's break down the example below, starting with the `data`.
|
|
|
|
- `observer` - a new `IntersectionObserver` with `infiniteScroll` set as the callback
|
|
- `limit` - the number of options to display
|
|
- `search` - since we've disabled Vue Selects filtering, we'll need to filter options ourselves
|
|
|
|
When Vue Select opens, the `open` event is emitted and `onOpen` will be called. We wait for
|
|
`$nextTick()` so that the `$ref` we need will exist, then begin observing it for intersection.
|
|
|
|
The observer is set to call `infiniteScroll` when the `<li>` is completely visible within the list.
|
|
Some fancy destructuring is done here to get the first `ObservedEntry`, and specifically the
|
|
`isIntersecting` & `target` properties. If the `<li>` is intersecting, we increase the `limit`, and
|
|
ensure that the scroll position remains where it was before the list size changed. Again, it's
|
|
important to wait for `$nextTick` here so that the DOM elements have been inserted before setting
|
|
the scroll position.
|
|
|
|
<InfiniteScroll />
|
|
|
|
<<< @/.vitepress/components/InfiniteScroll.vue
|