Question

js并生成了此弹出窗口的代码，点击navbar-link元素时，popover将会显示或隐藏。当我点击屏幕上的任何地方时（如果弹出窗口打开），关闭popover会更好。

要实现这一目标的任何想法？

<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函数并将事件绑定到文档元素：

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);
        }
    }
}

使用此解决方案，单击弹出窗口也将关闭它。因此，您需要停止在您的popover上传播点击事件：

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

Vue.js - 如何跟踪全局点击事件

1 个答案: