Vueでコンポーネントの外側をクリックしたら閉じたい

dependencies

vue: 2.x

目的

コンポーネントの外側、または他の部分をクリックしたら、そのコンポーネントを非表示にしたい。

ModalやDialogのようなコンポーネントはscrim(黒い背景のこと)を持つため、外側をクリックしたら閉じるという動きを作りやすい。実際scrimはコンポーネント内ですし。

そうではなく、Popupなどの軽率にフロートしてなおかつ外側をクリックしたら閉じてほしい、というコンポーネントはそれぞれがdocument.onclickに反応する必要がある。

ググってみたらdirectiveで頑張っている例が多い。

• vue-click-outside
• Custom Directive

vue-click-outsideのコード
https://github.com/vue-bulma/click-outside/blob/master/index.js

ハンドラを通したりSSRを想定する過程で少しhakkyになっているように見える。

ここではdirectiveの代わりにWrapper Componentでよりシンプルに解決したい。

Wrapper (Popup) Component

Popup.vue

<template>
  <div @click.stop>
    <slot />
  </div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  methods: {
    onClickOutside(e: Event) {
      this.$emit("click-outside");
    },
  },
  beforeMount() {
    document.addEventListener("click", this.onClickOutside);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.onClickOutside);
  },
});
</script>

解説

beforeMountとbeforeDestroyはサーバーサイドレンダリングでは呼ばれない。
そのため、directiveで必要なサーバーか否かの判定は必要無くなる。

ref: API — Vue.js

あと自身がクリックされた時にdocumentへ通知されないように、空の@click.stopを置いている。

Usages

usage.vue

<template>
  <PopOver v-if="popOver.isVisible" @click-outside="togglePopOver">
    <div>{{ contents }}</div>
  </PopOver>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  data() {
    return {
      popOver: { isVisible: true }
    }
  },
  methods: {
    togglePopOver() {
      this.$data.popOver.isVisible = !this.$data.popOver.isVisible;
    },
  },
});
</script>

解説

表示/非表示はv-ifで判定してもいいし、PopOverにpropsを渡して自身が判定する方法にしてもいい。
このサンプルではPopOverは何のスタイルも持たず単なるdivとしてDOM Treeには表示されるので、スタイルは好きに変更すれば良いのでは。