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
1.3 KiB
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 newIntersectionObserverwithinfiniteScrollset as the callbacklimit- the number of options to displaysearch- 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.
<<< @/.vitepress/components/InfiniteScroll.vue