vue-click-outsideライブラリを使って、特定の要素以外をクリックした時にイベントを発火させる

4557 ワード
Vue.js ターミナル ターミナル テキストリンク

はじめに

今回は、もうそのままタイトル通りになります。vue-click-outsideライブラリを使用したら、要素以外をクリックした時にイベントを発火させることが簡単に実装できました。今後も使う場面が多そう？かなと思い、メモとして残させていただきます。

1.vue-click-outsideライブラリをインストール

$ npm install vue-click-outside

2.実際のコード（例）

Hoge.vue
<template>
    <div>
      <button
        v-click-outside="onOutsideClick"
        @click="onClick">
        クリック
      </button>
      {{ message }}
    </div>
</template>

<script>
// vue-click-outsideライブラリをインポートする
import ClickOutside from 'vue-click-outside'

export default {
  data() {
    return {
      message: ''
    }
  },

  methods: {
    // クリックボタンの要素外を押した時に発火する
    onOutsideClick() {
      this.message = 'クリックボタン以外を押したよ！'
    },

    // クリックボタンを押した時に発火する
    onClick () {
      this.message = 'クリックボタンを押したよ！'
    },
  },

  /*
    directivesオプションを使用して、ローカルディレクティブに登録することで、
    ライブラリの機能を使用することができる
  */
  directives: {
    ClickOutside
  }
}
</script>

簡単な説明になってしまいますが、コメントアウトで残しました。
ぜひ、確認をお願いします

3.ブラウザで確認

クリックボタンを押すと、「クリックボタンを押したよ！」というメッセージが表示されます。また、クリックボタンの要素外を押すと「クリックボタン以外を押したよ！」と表示されるので、今回のライブラリが機能していることが確認できました。
はい、以上になります。

おわりに

今回のコードのような実装はしないと思いますが、vue-click-outsideライブラリを使用したら、他でも使える場面が多くあると思います。
もしみなさまも使う機会がありましたら、ぜひ使ってみてください。また、今回の内容で誤り等ありましたら、お手数ですが教えていただけるとありがたいです。よろしくお願いいたします。

参考資料

github　vue-click-outside