Question

我想仅在单击而不是悬停激活器时触发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>

Answer 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>

Answer 2

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


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

[更新]基于@Kael Watts-Deuchar答案 NB ：V型出价是强制性的

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

2 个答案: