在焦点区域外单击时弹出窗口不会关闭

Question

我正在将 Bootstrap Vue 与 Vue.js 一起使用，但遇到了一个问题，即我正在迭代某些项目并将它们显示给用户。

问题是，当用户单击其中一个弹出框时，打开的每个弹出框都会关闭（如我所愿），但是当用户单击目标（​​打开）弹出框的焦点区域外时，它不再关闭.

看起来每次用户单击目标弹出框时都会运行开场动画。

这是代码：

 <template> <div> <div class="row" v-for="(n, i) in 5" :key="n"> <div :id="'popover' + visitor.id + '-' + i" @click="$root.$emit('bv::hide::popover')"> <div class="card"> <b-popover :target="'popover' + visitor.id + '-' + i"> <template slot="title"> Edit image <button class="close-popover" @click="$root.$emit('bv::hide::popover', 'popover' + visitor.id + '-' + i)" >X</button> </template> </b-popover> </div> </div> </div> </div> </template>

任何帮助表示赞赏！

Answer 1

您可以在创建时使用此功能

created(){
    document.getElementsByTagName('body')[0].addEventListener('click', e => {
      this.$root.$emit('bv::hide::popover')
    });
},

Answer 2

您可以在弹出窗口上设置triggers="click blur" 。 当用户在弹出框外或目标上单击时，这将关闭它。

您可以在此处查看更多信息。

Answer 3

将此 Jquery 添加到您的代码中，它可能会起作用。

 $('body').on('click', function (e) {
        $('[target=popover]').each(function () {
            if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                $(this).popover('hide');
            }
        });
    });

你也可以试试这个：

您可以将此添加到您的代码中并尝试。

 <a class="close" href="#">Close</a>  

还要添加这个jquery：

 $('.close').click(function() {
       $(".class").fadeOut(300);
    });

Answer 4

一个可能的解决方案是 vue 指令v-click-outside 。

基本上，您只需安装它： npm install --save v-click-outside

并使用：

<template>
  <div v-click-outside="onClickOutside"></div>
</template>