Popover не закрывается при нажатии за пределами его зоны фокусировки - PullRequest
Новая
       14

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

0 голосов
/ 19 марта 2019

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

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

Ответы [ 2 ]

0 голосов
/ 19 марта 2019

Добавьте этот 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 голосов
/ 19 марта 2019

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

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

И использовать: 

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