Vuetify VTooltip 仅在激活器单击时触发

Posted 2023-02-16

【中文标题】Vuetify VTooltip 仅在激活器单击时触发

【英文标题】：Vuetify VTooltip trigger only on activator click

【发布时间】：2020-06-04 21:54:44

【问题描述】：

我只想在点击激活器而不是悬停时触发 Vuetify 工具提示 VTooltip。我试图将它与一个变量绑定，但仍然在悬停时触发。

 methods:  

  doCopy()
     // copy logic
     this.showCopied = true;
     setTimeout(() => 
        this.showCopied = false
      , 1000)

  
 

 <VTooltip v-model="showCopied">
    <template #activator=" on ">
      <VBtn  v-on="on" @click="doCopy"> COPY </VBtn>
    </template>
 </VTooltip>

【参考方案1】：

由于一些错误，这实际上比我预期的要复杂。您应该能够执行<v-tooltip :open-on-hover="false">，但仍会添加焦点侦听器，这会导致单击立即关闭工具提示。相反，您需要分别绑定单击和模糊事件，并将retain-focus-on-click 添加到按钮，使其不会立即模糊。

完整解决方案：

<v-tooltip bottom :open-on-hover="false">
  <template #activator=" on ">
    <v-btn @click="on.click" @blur="on.blur" retain-focus-on-click>Copy</v-btn>
  </template>
  <span>Copy</span>
</v-tooltip>

【参考方案2】：

事实证明我必须禁用激活器的默认事件处理程序。 只需删除默认事件对象 (on) 绑定即可解决问题。

<VTooltip v-model="showCopied">
    <template #activator=>
      <VBtn  @click="doCopy"> COPY </VBtn>
    </template>
 </VTooltip>

[更新] 基于@Kael Watts-Deuchar 的回答 注意：v-model 投标是强制性的

【讨论】：

感谢您的发帖，因为我只是在考虑如何使用不同的 Vuetify 组件做类似的事情并遇到了这个问题。

on.prevent 不是修饰符，它访问的是未定义的 on 对象上的 prevent 属性。完全不使用 v-on 也会有同样的效果。

【参考方案3】：

在 vuetify 2.6.1 中你现在可以这样做

<v-tooltip
  open-on-click
  :open-on-hover="false"
>
  <template
    v-slot:activator=" on "
  >
    <v-btn
      v-on="on"
    >
      button with tooltip
    </v-btn>
  </template>
  <span>tooltip message</span>
</v-tooltip>