javascript - 在其焦点区域外单击时弹出框未关闭

Question

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

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

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

这是代码：

<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>

任何帮助表示赞赏！

标签： javascripttwitter-bootstrapvue.jsbootstrap-vue

Answer 1

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

你可以在这里查看更多。