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

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

您可以查看更多HERE。

Answer 2

您可以在创建的

中使用此功能

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

Answer 3

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

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

并使用：

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

Answer 4

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

在焦点区域外单击时，弹出框未关闭

4 个答案: