Vue에서 드롭다운 메뉴 바깥 클릭시 메뉴 닫기

 

 

외부 영역 인식하기

 

1. refs 속성으로 dom 요소 접근하기

우선 외부 영역 클릭을 인식하기 위해서 요소에 직접 접근할 수 있도록 해주는 refs 속성을 사용해야 한다.

ref="참조명"

위와 같이 접근 가능

2. eventListener로 클릭 이벤트 처리하기

앞에서 참조할 요소 지정했으면, dom요소가 클릭되었는지를 감지하기 위해 eventListener를 사용해야 한다.

window.addEventListener('click', this.onClick);

dom에 클릭이벤트 발생했으면 onClick 함수 실행한다.

 

onClick(e){
	if(e.target.parentNode !== this.$refs.card){
		// 결과창 닫기
		}
	}

 

 

 

 

---

 

 

  <div id="dropdownContainer" ref="dropdown">
    <div class="dropdown" @click="onClick">{{ dropDown }}</div>
    <div v-if="dropdownMenu && click" class="menu">
      <ul>
        <li v-for="(item, index) in dropdownMenu" :key="index">
          {{ item }}
        </li>
      </ul>
    </div>
  </div>

dropdown요소에 ref추가하여 해당 dom을 참조할 수 있도록 한다.

 

 

    const dropdown = ref(null);

script안에서는 ref로 참조한 이름과 같이 선언해준다.

 

 

    const onClick = () => {
      click.value = !click.value;
      if (click.value) {
        document.addEventListener("click", closeDropdown);
      } else {
        document.removeEventListener("click", closeDropdown);
      }
    };

onClick 함수 실행되면 click.value가 true일 때 (dropdown이 열려있을 때)

이벤트 리스너 함수를 실행한다.

 

   const closeDropdown = (event) => {
      if (!dropdown.value.contains(event.target)) {
        click.value = false;
        document.removeEventListener("click", closeDropdown);
      }
    };

dropdown.value가 evaent.target(사용자가 클릭한 요소)을 포함하고 있지 않을 때는

click.value를 false로 주어 드롭다운이 닫히게 한다.