概要

最近 Tailwind CSS に入門しました。
かなり綺麗にサイトをデザインできるので重宝しています。

ただ、javascriptを使っての動的な部分については、ほぼほぼ自前で作らないといけないので、そこが若干ネックになっています。

今回は、特定の要素をクリックした時に表示されるポップアップメニューを閉じる時の実装の話です。（VueJsを使っている前提です。）

ポップアップメニューは、ポップアップメニュー以外の部分の要素をクリックすると閉じる動作をして欲しい場合があります。

モーダルダイアログなどは、画面全体に薄暗い背景を敷いて、そこをクリックした時に閉じれば良いのですが、ポップアップメニューの場合はそういうわけにもいかず
ちょっと調べて実装してみました。

• windowのclickイベントを登録しておき、クリックされた時の要素を元に処理をする（要素がポップアップメニュー外なら閉じる）のが基本のようでした。

自前で組んでもそこまで大変じゃなさそうでしたが、vue-click-outside - npmが便利そうなので、使って実装しました。

実装内容

インストール

yarn add vue-click-outside

vue

• ClickOutside という directiveを登録しておき、ポップアップメニューに関係する要素のプロパティに設定することで使うことができました。

（以下のコードはかなりデフォルメしています）

<template>
  <div v-click-outside="hideMenu">
    <div>
      <button @click="menuOpen = !menuOpen">Open user menu</button>
    </div>
    <div v-if="menuOpen">
      <a>settings</a>
      <a>logout</a>
    </div>
  </div>
</template>

<script>
import ClickOutside from 'vue-click-outside'
export default {
  directives: {
    ClickOutside,
  },
  data() {
    return {
      menuOpen: false,
    }
  },
  methods: {
    hideMenu() {
      if (this.menuOpen) this.menuOpen = false
    },
  },
}
</script>

以上です。