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

Question

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

 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>

Answer 1

由于一些错误，这实际上比我预期的要复杂。您应该能够做到<v-tooltip :open-on-hover="false">，但仍然添加了一个焦点侦听器，这会导致单击立即关闭工具提示。相反，您需要分别绑定 click 和 blur 事件，并将其添加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>

Answer 2

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

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

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