Question

我使用v-tooltip创建可点击的弹出窗口。我希望即使鼠标离开弹出框和触发它的元素（在我的示例中为按钮），弹出框也能保持可见的状态几秒钟。

这是我代码中的简化示例：

<v-popover trigger='hover' delay='{ show: 250, hide: 5000 }'>

    <!-- Popover target -->
    <button type='button'>x</button>

    <!-- Content of popover -->
    <template slot='popover'>
        <p>###</p>
    </template>
</v-popover>

我的问题是delay属性没有任何作用。 trigger='hover'正在工作（否则，弹出窗口只会在单击时显示），但是一旦我将鼠标移开，弹出窗口就会消失。它不应该保持5秒钟可见吗？

Answer 1

您在:delay之前忘记了冒号。因此，您只传递字符串而不是对象。

Vue.use(VTooltip)

new Vue({el: '#app'})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/v-tooltip"></script>
<div id="app">
  <div>
    <v-popover trigger='hover' :delay='{ show: 250, hide: 5000 }'>
      <!-- Popover target -->
      <button type='button'>x</button>
      <!-- Content of popover -->
      <template slot='popover'>
        <p>###</p>
    </template>
    </v-popover>
  </div>
</div>

Vue：延迟选项不适用于v-popover

1 个答案: