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

n8ghc7c1 于 2024-01-04 发布在 Bootstrap

关注(0)|答案(5)|浏览(98)

我正在使用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>

字符串
任何帮助是赞赏！

twitter-bootstrap

来源：https://stackoverflow.com/questions/55236330/popover-not-closing-when-clicking-outside-its-focus-area

5条答案

按热度按时间

jm2pwxwz1#

您可以在弹出框上设置triggers="click blur"。这将在用户在弹出框外部或目标上单击时关闭它。
你可以在这里查看更多。

赞(0）回复(0）举报 2024-01-04

6yoyoihd2#

您可以在创建的

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

字符串

赞(0）回复(0）举报 2024-01-04

cgvd09ve3#

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

型

赞(0）回复(0）举报 2024-01-04

ujv3wf0j4#

一个可能的解决方案是vue指令v-click-outside。
基本上，您只需安装它：npm install --save v-click-outside
用途：

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

字符串

赞(0）回复(0）举报 2024-01-04

vof42yt15#

将属性**tabindex='0'**添加到click元素

<span id="popover" tabindex='0'>test</span>

字符串
添加设置触发器为'点击模糊'

<b-popover
   target="popover"
   title="Prop Examples"
   triggers="click blur"
   content="Embedding content using properties is easy"
/>

型

赞(0）回复(0）举报 2024-01-04

我来回答

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

5条答案

相关问题

热门标签

最新问答