Vue.js - 전체 클릭 이벤트

Question

js를 추적하고 navbar-link 요소를 클릭하면이 팝업 코드가 생성되어 popover이 표시되거나 숨겨집니다. 어떤 점이 좋을까요? (팝업 창이 열려있는 경우) 화면의 아무 곳이나 클릭하면 popover을 닫는 것입니다.

어떤 아이디어가 있습니까? 또한,이 솔루션으로 팝 오버에 클릭을

export default { 
    data() { 
     return { 
      opened: false 
     } 
    }, 
    methods: { 
     toggle() { 
      if (this.opened) { 
       return this.hide() 
      } 
      return this.show() 
     }, 
     show() { 
      this.opened = true; 
      setTimeout(() => document.addEventListener('click',this.hide), 0); 
     }, 
     hide() { 
      this.opened = false; 
      document.removeEventListener('click',this.hide); 
     } 
    } 
} 

됩니다

<template> 
    <div> 
    <span class="navbar-link" v-on:click="toggle()"> 
     <i class="ion-android-notifications-none"></i> 
    </span> 
    <div class="popover" v-bind:class="{ 'open': opened }"> 
     Hello, world! 
    </div> 
    </div> 
</template> 
<script> 
    export default{ 
    data(){ 
     return { 
     opened: false 
     } 
    }, 
    methods: { 
     toggle: function() { 
     this.opened = !this.opened; 
     } 
    } 
    } 
</script> 

사전 :

Answer 1

당신은 여전히 ​​글로벌 JS 기능을 사용할 수 있으며, 문서 요소에 이벤트를 바인딩에 감사드립니다 닫아. 따라서 팝업으로 클릭 이벤트가 전파되는 것을 차단해야합니다.

<div class="popover" v-bind:class="{ 'open': opened }" @click.stop> 
    Hello, world! 
</div>