Nuxt3で「要素外をクリックされたら」イベントを実装

掲載日
更新日

はじめに

本サイトはスマートフォンで閲覧時に、ヘッダーメニューをハンバーガーメニューに折りたたみ、
クリックで右サイドメニューとして表示するという仕組みになっています。
右サイドメニュー展開後、×ボタンかメニュー外をクリックでサイドメニューを非表示にすることが可能ですが、
実装時困ったのが、「メニュー外をクリック時のイベント」を実装する方法。

カスタムディレクティブという機能を使用すれば実装が可能ということが分かったのでその備忘録です。

実装

コード

まずpluginsディレクトリ配下に任意のファイルを作成し、以下のようなコードを作成。
(自分の場合、全ページに表示するサイドバーなので、アプリケーション全体で使う機能としてpluginsディレクトリに入れましたが、用途に合わせてコンポーネントの中などに記載することも可能なようです。)

export default defineNuxtPlugin((nuxt) => {
    nuxt.vueApp.directive('click-outside', (el, binding) => { // ※1
        el.clickOutsideEvent = (event: Event) => {
            if (!(el === event.target || el.contains(event.target))) {
                binding.value()
            }
        }
        document.addEventListener('click', el.clickOutsideEvent)
    })
})

続いてnuxt.config.tsファイルの任意の位置に以下のコードを追記します。
(clickOutside.tsは任意のファイル名)

    // 省略
    plugins: [{
        src: '@/plugins/clickOutside.ts',
    }],
    // 省略

後はイベントを実装したいタグやコンポーネントなどに以下のように記述するだけで実装完了です。
(click-outside部分は実装に合わせて上記※1部分の名称に読み替えてください。)

<div v-click-outside="{{ 任意のメソッド名など }}"></div>

参考サイト

記事の作成者のA.W.のアイコン

この記事を書いた人

A.W.
茨城県在住Webエンジニアです。 PHPなどを業務で使用しています。 趣味ではGoやNuxt、Flutterをやってます。

Comment