모달창 외부를 클릭했을 때 모달창이 닫히는 기능

[박지환]

안녕하세요 강의 너무 잘 듣고 있습니다!

vue 강의 모두 듣고 개인 프로젝트를 해보고 있는데요
모달창 외부를 클릭하면 모달창이 닫히는 기능을 구현해보려고 @blur를 써봤는데 동작하지 않습니다
구글링해도 이해가 잘 안되거나 적절하지 않은 예시만 보여서 질문드립니다
혹시 쉽게 처리하는 방법이 있을까요??

아래는 제가 시도한 내용입니다

  <div class="wrapper">
    <div class="upperBar">
      <div class="hamModal" v-if="hamModal == 1">
      </div>
    </div>
  <div>
에서

<div class="hamModal" v-if="hamModal == 1" @blur="hamModal = 0">
이렇게 시도해봤으나 동작이 안됩니다

css는 아래와 같이 세팅했습니다

.warpper {
  height: 600px;
  width: 360px;
  background-color: black;
}

.upperBar {
  width: 360px;
  height: 55px;
  background-color: rgb(102, 206, 116);
  padding: 1px;
  z-index: 10;
}

.hamModal {
  width: 140px;
  height: 470px;
  float: left;
  position: fixed;
  z-index: 10;
}

[codingapple]

blur는 보통 input태그에만 씁니다
모달창 바깥에있는 박스에 @click.self="모달창닫는코드" 넣으면 끝입니다

[박지환]

해결됐어요!

감사합니다ㅎㅎ

[글쓴이]

글