Vue-bootstrap如何实现我的popover的流畅工作

Question

我有一个简单的 Vue 应用程序，它有很多卡片，当我将鼠标悬停在卡片上时，它会显示一个按钮，然后当我将鼠标悬停在按钮上时，它会显示弹出框，但我的弹出框不像我预期的那样工作。当我尝试访问它的内容时它会闪烁，并且不会在鼠标离开弹出窗口时隐藏。

模板

<div id="app">
<div class="container">
  <div class="row">
    <div class="col-12">
      <b-card-group>
      <b-card
        v-for="(card, index) in cards"
        :key="card.id"
        :id="card.id"
        v-on:mouseover="card.show_menu = true"
        v-on:mouseleave="card.show_menu = false"
        bg-variant="light"
        class="text-center m-1 cards"
      >
        <b-card-text id="note-text">{{card.text}}</b-card-text>
        <hr />
        <div v-if="!card.show_menu">
          <b-card-text id="note-text" class="small muted-text m-0 p-0">
          <p>Super informal text here </p>
          <p>Super informal text here </p>
          </b-card-text>
        </div>
        <div v-else>
          <div>
            <img
              src="https://i7.pngguru.com/preview/369/878/399/computer-icons-plus-sign-clip-    art-plus-sign-thumbnail.jpg"
              class="m-2"
              width="24"
              height="24"
              alt
              :id="'image_id_' + card.id"
              v-on:mouseover="card.show_pop = true"
            />

            <b-popover
              :show.sync="card.show_pop"
              :target="'image_id_' + card.id"
              placement="bottom"
              v-on:mouseleave="note.show_pop = false"
            >
              <p>Super popover data!</p>
            </b-popover>
          </div>
        </div>
      </b-card>
     </b-card-group>
    </div>
  </div>
</div>

js

new Vue({
  el: '#app',
  data: {
    cards: [
      {id: 1, text: 'some text goes here', show_menu: false, show_pop: false},
      {id: 2, text: 'some text goes here', show_menu: false, show_pop: false},
    ]
  }
})

有人可以解释如何解决这个问题https://jsfiddle.net/nashgc/by2fxm4z/23/

Answer 1

删除您的 mouseover 和 mouseleave 事件，并改为在弹出窗口上使用 hover 触发器。 您还需要在您的卡上设置一个容器。因为默认情况下它附加到body，这意味着您的卡片的鼠标悬停事件将不再起作用，这就是为什么当您将其悬停时它会丢失。

<img
  src="https://i7.pngguru.com/preview/369/878/399/computer-icons-plus-sign-clip-art-plus-sign-thumbnail.jpg"
  class="m-2"
  width="24"
  height="24"
  alt
  :id="'image_id_' + card.id"
/>

<b-popover
  :target="'image_id_' + card.id"
  triggers="hover"
  :container="`#${card.id}`"
  placement="bottom"
>
  <p>Super popover data!</p>
</b-popover>

旁注：我不认为 mouseover/mouseevent（以及弹出框上的悬停触发器）是移动设备上的可访问事件，以及仅限键盘的用户。因此，您当前的设计可能不适用于多个用户。