时间戳

首页 > 解决方案 > 我们如何识别整个项目（许多页面）中任何地方发生的 vue popover 触发器？

vue.js - 我们如何识别整个项目（许多页面）中任何地方发生的 vue popover 触发器？

问题描述

我在我的项目中到处使用 vb-popover（很多页面）。每当我们单击或悬停在任何页面上的弹出按钮上时，我都需要知道，那么我们如何知道触发发生了。

我想知道而不在该元素的属性上写任何事件（弹出框）。

有什么办法吗？

标签： vue.jsbootstrap-4vuejs2bootstrap-vue

解决方案

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

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

参考：https ://bootstrap-vue.org/docs/components/popover#listening-to-popover-changes-via-root-events

您还可以侦听除bv::popover::show、likebv::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>

推荐阅读