didof-common
Didof Common
I like to build stuff from scratch. But it gets old after a while.
Hence, here I'm collecting a series of Vue components & directives that I use regularly across my other projects.
Demo
Clone repo and run
npm install
then
npm run demo
Components
IntersectionObserver
<IntersectionObserver
:threshold="[0.5, 1]"
@in="inFn"
@out="outFn"
@observe="observeFn"
@update="updateFn"
@disconnect="disconnectFn"
>
Anything you want to observe
</IntersectionObserver>
Abstract
A simple and immediate way to wrap any component and obtain info about it position relatively to the view.
It works both with a single child or multiple. In the latter case, the events in
and out
are fired for all children.
Props
See official docs for their purpose.
- threshold: if updated, the observer is disconnected, then reconnected with the new value of the prop. The event update is emitted.
Events
- in: dispatched for each entry, triggered when the entry enters in view. Brings as payload the entry itself.
- out: like previous, but triggered when the entry slips out of view
- update: emitted when any props (only threshold right now) is changed. Brings as payload the following structure:
{ name, currentValue, oldValue }
- disconnect: literally the last thing the component emits before being unmounted.
MultiLevel [WIP]
Dependencies
@babel/core: ^7.14.6@babel/preset-env: ^7.14.7@rollup/plugin-alias: ^3.1.2@rollup/plugin-babel: ^5.3.0@rollup/plugin-commonjs: ^14.0.0@rollup/plugin-node-resolve: ^9.0.0@rollup/plugin-replace: ^2.4.2@vue/cli-plugin-babel: ^4.5.13@vue/cli-service: ^4.5.13@vue/compiler-sfc: ^3.0.11cross-env: ^7.0.3minimist: ^1.2.5postcss: ^8.2.10rimraf: ^3.0.2rollup: ^2.52.8rollup-plugin-postcss: ^4.0.0rollup-plugin-terser: ^7.0.2rollup-plugin-vue: ^6.0.0vue: ^3.0.5