コンポーネント外のタップイベントでナビゲーションバーを隠す

自分でtoggleするメソッドかいてたんだけど、ナブバーの外クリックした時にどうしたらいいかわからなくてライブラリ(vue-click-outside)を使うことにした。

かつてのコードにこれらを追加しただけで簡単に実装できた。

yarn add vue-click-outside

navbar.vue

<div id="navbarBasicExample" class="navbar-menu" v-click-outside="openNav" @click="openNav" v-bind:class="{'is-active': isOpen}">

<script>
import ClickOutside from 'vue-click-outside'

  mounted () {
    this.popupItem = this.$el
  },
  directives: {
    ClickOutside
  }
</script>

修正前

navbar.vue

<template>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="/">
        <img src="https://designcase.jp/wordpress/wp-content/themes/designcase/img/logo.png">
      </a>
      <a role="button" class="navbar-burger burger" aria-label="menu"  data-target="navbarBasicExample" @click="openNav" v-bind:class="{'is-active': isOpen}">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <div id="navbarBasicExample" class="navbar-menu" @click="openNav" v-bind:class="{'is-active': isOpen}">
      <div class="navbar-end" v-bind:class="{'is-active': isOpen}">
        <router-link class="navbar-item" to="/informations">お知らせ</router-link>
        <router-link class="navbar-item" to="/faq">よくある質問</router-link>
        <router-link class="navbar-item" to="/contacts">お問い合わせ</router-link>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  data () {
    return {
      isOpen: false,
      tableData: []
    }
  },
  methods: {
    openNav () {
      this.toggleModal() 
    },
    toggleModal () {
      this.isOpen =! this.isOpen
    }
  },
  mounted () {
  }
}
</script>

修正後

navbar.vue

<template>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="/">
        <img src="https://designcase.jp/wordpress/wp-content/themes/designcase/img/logo.png">
      </a>
      <a role="button" class="navbar-burger burger" aria-label="menu"  data-target="navbarBasicExample" @click="openNav" v-bind:class="{'is-active': isOpen}">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <div id="navbarBasicExample" class="navbar-menu" v-click-outside="openNav" @click="openNav" v-bind:class="{'is-active': isOpen}">
      <div class="navbar-end" v-bind:class="{'is-active': isOpen}">
        <router-link class="navbar-item" to="/informations">お知らせ</router-link>
        <router-link class="navbar-item" to="/faq">よくある質問</router-link>
        <router-link class="navbar-item" to="/contacts">お問い合わせ</router-link>
      </div>
    </div>
  </nav>
</template>

<script>
import ClickOutside from 'vue-click-outside'
export default {
  data () {
    return {
      isOpen: false,
      tableData: []
    }
  },
  methods: {
    openNav () {
      this.toggleModal() 
    },
    toggleModal () {
      this.isOpen =! this.isOpen
    }
  },
  mounted () {
    this.popupItem = this.$el
  },
  directives: {
    ClickOutside
  }
}
</script>

url: https://github.com/vue-bulma/click-outside