【簡単】vue-click-outsideライブラリを使ってみた

watsuyoと申します。
年末年始に作っていたToDoアプリでめっちゃ役に立ったライブラリを紹介します。

「vue-click-outside」を使おうと思った理由

• 作成のToDoアプリでモーダルウィンドウ使用し、それを閉じる動作が欲しかった
• 「☓」で閉じる動作だと誤タップや誤クリックを招くから

実際に「vue-click-outside」を使用したアプリはこちらです。

この画像でいうと黒い部分をタップorクリックするとモーダルが閉じるようになります。

実際のコード

ToDo.vue

<template>
---中略---
  <div class="modal" :class="{'is-active':isActive}"> //isActiveがtrueならモーダルを表示
    <div v-click-outside="close" @click="close" class="modal-background"></div>
    <div class="modal-content">
      <div class="box">
        <div class="content has-text-centered">
          <div class="control">
            <form class="field is-grouped" @submit.prevent="Add">
              <div class="control is-expanded">
                <input class="input is-rounded" type="text" v-model="newItem" placeholder="Title">
                <textarea class="textarea" type="text" v-model="newContent" style="white-space: pre;" placeholder="Todo"></textarea>
                <input class="button is-info is-rounded" type="submit" value="Add">
              </div>
            </form>
          </div>
          <span>&nbsp;</span>
        </div>
      </div>
    </div>
  </div>
---中略---
</template>
<script>
import ClickOutside from 'vue-click-outside' //import
  export default {
    name: 'ToDo',
    newItem: "",
    props: ["user"],
    data () {
      return {
        todos: [],
        components: [],
        isActive: false //初期画面ではモーダルを表示しないためfalse
      }
    },
---中略---
    methods: {
      close: function () {
        ---中略---
        this.isActive = !this.isActive
      }
    },
    mounted () { 
      this.popupItem = this.$el //popupItemを使用して、イベントの外側をクリックしないようにする
    },
    directives: { //directivesオプションを使用することにより、ローカルディレクティブに登録されるため、機能を使うことができる
      ClickOutside 
    }
---中略---
</script>

上記ファイルのscript内でvue-click-outsideをimportすることによって、v-click-outside="close"は、モーダルウィンドウの範囲外をクリックすることでモーダルを閉じる機能を与えることができます。

methodsオプション内にある、close関数では初期dataでfalseと設定したisActiveを!isActiveに、すなわちtrueに変更することでモーダルを閉じる処理が完成します。

感想

実現したい機能がすでにライブラリ化しているとめちゃくちゃ楽なんだなと身をもって実感しました。

自分も近い将来、ライブラリを作ってみたい…！

Twitter、コメントへのフィードバックお待ちしています！！