[vue.js] 요소 외부클릭 감지하기 (외부클릭시 요소 변경)

vue 개발환경에서 특정 버튼 클릭시 드롭다운을 활성화 하며,

해당 드롭다운 외부를 클릭할 시 드롭다운을 없애야하는 기능을 구현해야 했다.

 

이를 위해 특정 요소 외부클릭을 인식해야했다.

dom 요소 직접접근하는 방식과 라이브러리를 사용하는 방식 등이 있었으며 나는 추후 이벤트값 활용을 위해 후자를 선택했다.

 

---

 

버튼을 클릭하여 드롭다운을 활성화 한 상태일때, 화면은 아래와 같은 모양이다.

 

 

 

 

 

 

1. 라이브러리 인스톨

 

나는 v-click-outside 라이브러리를 사용하였다.

우선 라이브러리 인스톨을 수행한다.

npm install v-click-outside

 

 

2.  import 및 directives 추가

import vClickOutside from 'v-click-outside'

export default {

  directives: {
    clickOutside: vClickOutside.directive
  },
  
  ...
  
  }

 

 

 

3. 이벤트 걸기

<div id="dropdown-list" v-click-outside="onClickOutside">
   <button>메뉴 1</button>
   <button>메뉴 2</button>
   <button>메뉴 3</button>
</div>

원하는 요소에 v-click-outside 이벤트를 건다.

 

이렇게 하면 id가 dropdown-list인 요소 이외 공간을 클릭할시,

onClickOutside 메소드가 동작하며 이벤트가 발생하게 된다.

 

 

 

 

---

참고링크 : https://www.npmjs.com/package/v-click-outside