Поповер не закрывается при нажатии за пределами области фокуса

Я использую 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>

Любая помощь приветствуется!


javascript vue.js twitter-bootstrap bootstrap-vue
person hakaman    schedule 19.03.2019    source источник

Ответы (4)


arrow_upward
3
arrow_downward

Вы можете использовать эту функцию в созданных

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

arrow_upward
3
arrow_downward

Вы можете установить triggers="click blur" во всплывающем окне. Это закроет его, когда пользователь щелкнет за пределами всплывающего окна или на цели.

Вы можете проверить больше ЗДЕСЬ.

person Vedran    schedule 07.01.2021
comment
В дополнение к комментарию @Vedran отметьте, что для этого вам не обязательно нужна кнопка. Вы можете использовать атрибут tabindex=0 в триггерном элементе, чтобы сделать его фокусируемым. - person pegido; 18.01.2021

arrow_upward
1
arrow_downward

Добавьте этот 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);
    });
person renny    schedule 19.03.2019
comment
Я использую Vue.js, поэтому jQuery не идеальное решение. Но спасибо за предложение! - person hakaman; 19.03.2019
comment
Я также работаю над тем же самым материалом, и это делает мою работу - person renny; 19.03.2019

arrow_upward
0
arrow_downward

Возможным решением является директива vue v-click-outside.

По сути, вы просто устанавливаете его: npm install --save v-click-outside

И используйте:

<template>
  <div v-click-outside="onClickOutside"></div>
</template>
person Matheus Valenza    schedule 19.03.2019
comment
К сожалению, эта директива не работает. Похоже, Vue.js его не распознает. Спасибо, в любом случае - person hakaman; 19.03.2019