VueUseのonClickOutsideが便利

導入

今回の話題はVue3と一緒に使うと便利なVueUseについてです。
中でもonClickOutsideが単純ながらも強力です。

※ 私が株式会社愛宕 Advent Calendar 2023に書く記事は主に社内向けに共有しておきたいけど勉強会をするまでもないちょっとしたTipsにしたいと思います。

VueUseは便利なユーティリティ集で、クリップボードやLocalStorageなどのWeb APIを生の値ではなくリアクティブな形にラップして使えます。

onClickOutsideは主に開いているポップアップやダイアログの外側をクリックしたらそのダイアログの外側を閉じるという要件を実装するのに使えそうです。そのエレメントの内側をクリックしたときの処理を実装するのは簡単です。しかし、外側をクリックしたときの処理を実装するのはそれと同様にはいきません。

onClickOutsideを使うとそれが簡単になります。

解決

実際の表示非表示は省略しています。isDialogOpenの値に従って適切に表示非表示を切り替えられるようにCSSが指定されているものとします。

<script setup lang="ts">
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'

const isDialogOpen = ref(false)
const openDialog = () => isDialogOpen.value = true
const closeDialog = () => isDialogOpen.value = false

const dialogRef = ref(null) // onClickOutsideの第1引数に渡すテンプレート参照
onClickOutside(dialogRef, closeDialog) // 第2引数は外側をクリックしたときの処理
</script>

<template>
  <main>
    <button type="button" @click="openDialog">ダイアログを開く</button>
    <div ref="dialogRef"> <!-- テンプレート参照の設定が必要 -->
      <!-- ダイアログの中身は省略 -->
    </div>
    <div>
      <p>ここはダイアログとは関係なく表示されている部分です。</p>
      <p>ダイアログを閉じるボタンをクリックしなくてもここら辺を適当にクリックすることで閉じてほしい。</p>
    </div>
  </main>
</template>