#1 모달 외부 클릭하여 닫기

UserStory
쉽게 모달을 열고 닫을 수 있다.
ex) 구글 메인페이지 google apps 목록 펼쳐보기

모달 외부 클릭하여 닫기 위한 필수조건

1. 보여줄 모달에 v-if를 사용해 toggle 가능하도록 변수를 셋팅하여야 한다.
2. 모달의 tabindex 라는 요소를 -1로 설정되어야 한다.
3. focus()를 위한 요소의 ref값이 설정되어야 한다.
   실행 순서
4. 모달의 v-if 변수 값을 true로 설정 해 준다.
5. 해당 모달의 ref를 사용하여 focus()를 설정해준다.
6. blur가 될 경우, close()메소드를 실행한다.

</body>
	<div>
      <button>Modal open</button>
      <div class="modal" tabindex="-1" ref="mymodal"
      v-if="isModalOpen"
      @blur="closeModal">
          <button @click="openModal">Modal close</button>
          this is my modal
      </div>
    </div>
</body>

<script>
    data : {
    	return(){
        	isModalOpen : false,
        }
    },
    
    methods : {
    	openModal : function(){
        	this.isModalOpen = true;
            
            let self = this;
            
            this.$nextTick(function(){
            	self.$refs.mymodal.focus();
            })
        },
        
        closeModal : function(){
        	this.isModalOpen = false;
        }
    }
</script>