[英]Popover not closing when clicking outside its focus area
I'm using Bootstrap Vue with Vue.js and am experiencing a problem where I'm iterating over some items and displaying them to the user.我正在将 Bootstrap Vue 与 Vue.js 一起使用,但遇到了一个问题,即我正在迭代某些项目并将它们显示给用户。
The issue is, when a user clicks on one of the popovers, every popover that was opened gets closed (as I desire), but when the user clicks outside the focus area of the targeted (opened) popover, it doesn't close anymore.问题是,当用户单击其中一个弹出框时,打开的每个弹出框都会关闭(如我所愿),但是当用户单击目标(打开)弹出框的焦点区域外时,它不再关闭.
It looks like the opening animation runs every time the user clicks on the targeted popover.看起来每次用户单击目标弹出框时都会运行开场动画。
Here is the code:这是代码:
<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>
Any help is appreciated!任何帮助表示赞赏!
You can use this function in created您可以在创建时使用此功能
created(){
document.getElementsByTagName('body')[0].addEventListener('click', e => {
this.$root.$emit('bv::hide::popover')
});
},
Add this Jquery to your code and it will work, probably.将此 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');
}
});
});
Also you can try this:你也可以试试这个:
You can add this to your code and try.您可以将此添加到您的代码中并尝试。
<a class="close" href="#">Close</a>
Also add this jquery:还要添加这个jquery:
$('.close').click(function() {
$(".class").fadeOut(300);
});
A possible solution is the vue directive v-click-outside .一个可能的解决方案是 vue 指令v-click-outside 。
Basically, you just install it: npm install --save v-click-outside
基本上,您只需安装它: npm install --save v-click-outside
And use:并使用:
<template>
<div v-click-outside="onClickOutside"></div>
</template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.