在单击文档时隐藏所有弹出窗口 - 除了单击的那个(事件顺序错误) [英] Hide all popovers on document click - except the one clicked (getting wrong order of events)

问题描述

我正在使用 Vue.js 并且我有一个带天数的日历组件.当您单击一天时，它会显示它的弹出窗口.我试图做到这一点，如果您单击文档中的任何地方，它会隐藏所有弹出窗口.但它不应该隐藏我刚刚打开的那个.

我为文档点击添加了一个事件侦听器，但它在之后触发 Day 组件的 @click 事件.这意味着它会显示当天的弹出框，然后立即隐藏所有弹出框.但它应该首先隐藏所有弹出框，然后才显示当天的弹出框.

HTML

<日历月视图><天></天><天></天><天></天></calendar-month-view>

我的一天组件

出口默认{模板:`<div @click="isVisiblePopover = !isVisiblePopover"><popover v-show="isVisiblePopover"/>

`，成分: {弹出框},数据() {返回 {isVisiblePopover: 假}},安装(){$(document).click(event => {EventBus.$emit('popover-opened')});EventBus.$on('popover-opened', () => {this.isVisiblePopover = false});}};

解决方案

实现这一点的最简单方法是实现一种布局，放在 popover 后面，作为 Popover 组件的一部分，占据屏幕的 100%(不可见，或者可能具有某种不透明度).然后，您应该处理在单击背面布局时弹出窗口也会关闭的问题，并且没有单击对话框本身.它比处理整个文档中的点击(也处理弹出框点击！)更简单.

这里有一个弹出组件应该是什么样子的示例:

Vue.component('popover', {模板:`<div id="popover-layout" @click="layoutClicked($event)"><div id="popover-dialog" ref="popoverDialog">弹出对话框

`，方法: {布局点击(事件){if(event.target !== this.$refs.popoverDialog) {console.log('关闭弹出框！')}}}});var vm = new Vue({el: '#app'});

#popover-layout {位置:绝对；顶部:0；右:0；底部:0；左:0；不透明度:0.3；背景:银色；}#popover-dialog {宽度:200px；高度:150px；位置:绝对；顶部:50%；左:50%；边距顶部:-75px；左边距:-100px；边框:1px纯黑色；背景:白色；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="应用程序"><popover></popover>

I am using Vue.js and I have a Calendar component with days. When you click on a day, it shows it's popover. I am trying to make it so that if you click anywhere in the document it hides all popovers. But it should not hide the one that I just opened.

I added an event listener for document click but it fires after the Day component's @click event. Which means it shows the current day's popover and then immediately hides all popovers. But it should first hide all popovers and only then show the Day's popover.

HTML

<div id="app">
    <calendar-month-view>
        <day></day>
        <day></day>
        <day></day>
    </calendar-month-view>
</div>

My Day component

export default {

    template: `
        <div @click="isVisiblePopover = !isVisiblePopover">
            <popover v-show="isVisiblePopover" />
        </div>
    `,

    components: {
        Popover
    },

    data() {
        return {
            isVisiblePopover: false
        }
    },

    mounted() {
        $(document).click(event => {
            EventBus.$emit('popover-opened')
        });

        EventBus.$on('popover-opened', () => {
            this.isVisiblePopover = false
        });
    }
};

解决方案

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>

这篇关于在单击文档时隐藏所有弹出窗口 - 除了单击的那个(事件顺序错误)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！