Question

我知道jquery也有类似的问题，但这与vue.js有关

我正在使用uiv，它是vue.js的Boostrap版本。检查docs，我正在尝试使用trigger="manual"并在发生悬停事件时手动触发弹出式窗口：

<popover title="Title" v-model="show">
   <a href="javascript://" @mouseover="show = !show" @mouseleave="show = !show">Toggle Popover</a>
          <template slot="popover">
            <p>Popover content</p>
          </template>
 </popover>
    <script>
      export default {
        data () {
          return {
            show: false
          }
        }
      }
    </script>

好吧，我了解为什么当我离开将show设置为false的按钮时，由于弹出窗口而被关闭的原因。

所以我的问题是：我必须在哪里放置该@mouseleave事件，以防止在悬停时关闭弹出窗口？

在这里，我有一个链接链接：https://plnkr.co/edit/gTsOJE4k8fQUMcMUpqS6?p=preview

Answer 1

我已经解决了这个问题：

<popover trigger="hover" title="Title">
    <a href="#" @click.prevent>Toggle Popover</a>
    <template slot="popover">
       <p>Popover content</p>
     </template>
 </popover>

基本上，我们可以使用trigger="hover"来防止在悬停时关闭弹出窗口。

看看这个例子：https://plnkr.co/edit/RSjhazfxqBhaNqcKijXe?p=preview

Vuejs。 uiv，在悬停弹出式窗口时保持引导程序弹出式窗口还活着吗？

1 个答案: