@osaxyz/intersect

1.1.0 • Public • Published

@osaxyz/intersect

インストール

npm install @osaxyz/intersect

どう動くか

v-intersect="handleintersect"のように定義すると、要素が交差(Intersect)した際に関数が呼び出されます。

また、entry(交差情報)、el(交差したDOMの情報)を受け取ることができます。

使い方

Vue.jsの場合

  1. @osaxyz/intersectからintersectDirectiveをインポートします・
  2. app.useを利用して登録して下さい。
import intersectDirective from '@osaxyz/intersect'
app.use(intersectDirective)

const handleintersect = (entry, el) => {
    console.log(entry, el)
}

Nuxt.jsの場合

  1. plugins配下に任意の名前のjsファイルを作成し、インポートします。
  2. defineNuxtPlugin を用いて登録します。
import { defineNuxtPlugin } from 'nuxt/app'
import intersectDirective from '@osaxyz/intersect'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(intersectDirective)
})

コード

<YourCustomElements v-intersect="handleintersect">

Readme

Keywords

none

Package Sidebar

Install

npm i @osaxyz/intersect

Homepage

osa.xyz

Weekly Downloads

2

Version

1.1.0

License

MIT

Unpacked Size

2.23 kB

Total Files

4

Last publish

Collaborators

  • artouc