【Vue.js】vue-click-outsideを使ってドロップダウンメニューを実装

vue-dropdown-menuとは

vue-dropdown-menuは、ドロップダウンメニューを実装できるコンポーネントライブラリです。
マウスホーバーでメニューを展開したり、マウスを離したときに開閉するまでの時間を設定できたりなどが可能です。

vue-dropdown-menuの導入方法

以下のnpm、yarn、CDNを使ってインストールします。

• npm

npm i @innologica/vue-dropdown-menu --save

• yarn

yarn add @innologica/vue-dropdown-menu

• CDN

CDN

<script src="https://cdn.jsdelivr.net/npm/@innologica/vue-dropdown-menu@0.1.3/dist/vue-dropdown-menu.umd.min.js"></script>

vue-dropdown-menuの導入手順

1.ライブラリの取り込み

(1)webpack等の場合 [注意]モジュール版は未検証です。

import DropdownMenu from '@innologica/vue-dropdown-menu'

（2）WEBページの場合

const DropdownMenu = window['vue-dropdown-menu'].default;

2.メソッドを設定

上記で取得したDropdownMenuを Vue.use に取り込みます。

ドロップダウンメニューのプロパティ設定をdataに持たせます。

Vue.use(DropdownMenu);
 
new Vue({
  el: '#app',
  data: {
    show: false,
    right: false,
    hover: false,
    interactive: false
  }
});

3.テンプレートを準備

dropdown-menuを設置します。

header.vue

<template>
  <header class="header">
    <router-link to="/" class="header-ttl">
      <span class="header-ttl-color">C</span>inemary</router-link
    >
    <ul class="header-menu">
      <li>
        <router-link to="/signup" class="header-link" v-if="!authenticatedUser"
          >新規登録</router-link
        >
      </li>
      <li>
        <router-link to="/signin" class="header-link" v-if="!authenticatedUser"
          >ログイン</router-link
        >
      </li>
      <li>
        <span
          class="dropdown-menu"
          v-click-outside="clickoutside"
          @click="toggle"
        >
          <a class="header-link"
            >マイページ<span class="dropdown-arrow"></span
          ></a>
          <ul class="dropdown" :class="{ isOpen }">
            <li class="dropdown-items">
              <router-link to="/mypage" class="dropdown-link"
                >マイページ</router-link
              >
            </li>
            <li class="dropdown-items">
              <router-link to="/profile" class="dropdown-link"
                >プロフィール編集</router-link
              >
            </li>
            <li class="dropdown-items" v-if="authenticatedUser">
              <button
                class="dropdown-link"
                @click="signOut"
                v-if="authenticatedUser"
              >
                ログアウト
              </button>
            </li>
          </ul>
        </span>
      </li>
    </ul>
  </header>
</template>

このままではどこをクリックしてもメニューが開閉してしまうかと思います。

4.ドロップダウンメニュー外をクリックしたらメニューを閉じる

clickoutside: function() {
      //this.isOpenがtrue場合、this.toggleは何も起きない。
      //要するにドロップダウンメニューが開かれている時は、クリックしても何も起きない。
      if (this.isOpen) {
        this.toggle();
      }
    },
  mounted() {
    this.popupItem = this.$el;
  },
  //directivesオプションを使用することにより、ローカルディレクティブに登録されるため、機能を使える
  directives: {
    ClickOutside,
  },
};

上記を追記することでメニュー外をクリックしたら閉じるようになったかと思います。