我们如何识别vue popover触发器发生在整个项目的任何地方(许多页面)

Question

我的项目中到处都在使用v-b-popover(很多页面(。我需要知道，每当我们点击或悬停在任何页面上的弹出按钮上时，我们如何才能知道触发发生了。

我想在不写任何关于该元素(popover(属性的事件的情况下知道。

有办法吗？

Answer 1

您可以侦听$root上的事件，因为每个popover在显示时都会在$root上触发相同的事件。

this.$root.$on('bv::popover::show', bvEventObj => {
console.log('bvEventObj:', bvEventObj)
})

参考：https://bootstrap-vue.org/docs/components/popover#listening-通过根事件弹出更改

您还可以侦听bv::popover::show以外的其他事件，如bv::popover::hide或bv::popover::enabled。你可以在这里看到完整的列表。

new Vue({
el: '#app',
created() {
// Listen for an event on the root.
this.$root.$on('bv::popover::show', () => {
console.log('Popover Opened')
})
}
})

<link href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>

<div id="app">
<b-btn v-b-popover.hover.bottom="'Button 1'">Button 1</b-btn>
<b-btn v-b-popover.hover.bottom="'Button 2'">Button 2</b-btn>
<b-btn v-b-popover.hover.bottom="'Button 3'">Button 3</b-btn>
</div>