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

目的 コンポーネントの外側、または他の部分をクリックしたら、そのコンポーネントを非表示にしたい。 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を想定する過程で少し