vue-click-outside 라이브러리를 사용하여 특정 요소 이외의 항목을 클릭했을 때 이벤트를 발화시킵니다.

소개

이번에는 이제 그대로 제목대로 됩니다. 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