@osaxyz/intersect
インストール
npm install @osaxyz/intersect
どう動くか
v-intersect="handleintersect"
のように定義すると、要素が交差(Intersect)した際に関数が呼び出されます。
また、entry
(交差情報)、el
(交差したDOMの情報)を受け取ることができます。
使い方
Vue.jsの場合
-
@osaxyz/intersect
からintersectDirective
をインポートします・ -
app.use
を利用して登録して下さい。
import intersectDirective from '@osaxyz/intersect'
app.use(intersectDirective)
const handleintersect = (entry, el) => {
console.log(entry, el)
}
Nuxt.jsの場合
-
plugins
配下に任意の名前のjsファイルを作成し、インポートします。 -
defineNuxtPlugin
を用いて登録します。
import { defineNuxtPlugin } from 'nuxt/app'
import intersectDirective from '@osaxyz/intersect'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(intersectDirective)
})
コード
<YourCustomElements v-intersect="handleintersect">