vue.js - Vuetify VTooltip 仅在激活器单击时触发

Question

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

 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"> ，但是仍然添加了一个焦点监听器，这会导致单击立即关闭工具提示。相反，您需要分别绑定(bind) 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>