[Vuejs]-Hide all popovers on document click – except the one clicked (getting wrong order of events)

by

0👍

The easiest way to achieve that is to implement a kind of layout to put behind the popover, as part of the Popover component, taking the 100% of the screen (invisible, or maybe with some kind of opacity). Then, you should handle that the popover will also close when the back layout is clicked, and the dialog itself wasn’t clicked. It’s more simplier than handling clicks in the whole document (that also handles the popover clicks!).

Here you have an example of how the popup component should be like:

Vue.component('popover', {
  template: `
    <div id="popover-layout" @click="layoutClicked($event)">
      <div id="popover-dialog" ref="popoverDialog">
        Popover dialog
      </div>
    </div>
  `,
  methods: {
    layoutClicked(event) {
      if(event.target !== this.$refs.popoverDialog) {
        console.log('Close popover!')
      }
    }
  }
});


var vm = new Vue({
  el: '#app'
});
#popover-layout {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.3;
  background: silver;
}

#popover-dialog {
  width: 200px;
  height: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -100px;
  border: 1px solid black;
  background: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <popover></popover>
</div>

Leave a comment