如何在 Vuetify 2.0 中使用带有 v-file-input 标签的 v-tooltip？

Question

我想使用 v-tooltip，当我通过 v-file-input 输入文件并将鼠标悬停在文件名上时， 文件名将像 v-tool-tip 一样弹出。 所以我尝试使代码如下。

<template>
  <v-row>
    <v-col cols="4">file_Add_Sample_Code</v-col>
    <v-col cols="6" class="pl-0 py-2">
      <v-tooltip bottom v-model="showTooltip">
        <template v-slot:activator="{ on, attrs }">
          <v-file-input
            accept="application/zip"
            v-model="fileName"
            @change="getFileObject"
            truncate-length="22"
            style="flex-direction: row-reverse"
            v-bind="attrs"
            v-on="on"
            @mouseover="showTooltip = !showTooltip"
          >
          </v-file-input>
        </template>
        <span>{{ fileName }}</span>
      </v-tooltip>
    </v-col>
    <v-col cols="2" class="pl-0"></v-col>
  </v-row>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
@Component({})
export default class extends Vue {
  showTooltip: boolean = false
  fileName: string = ''
  async getFileObject(file:File) {
    this.fileName = await file.name
  }
}
</script>

我运行此代码并输入文件，文件输入成功，工具提示显示但从未消失。 所以，我认为在我的代码中使用 JS 中的事件处理程序谎言 @mouseover 是正确的我的问题，但它似乎不起作用。 我的目标是当我将鼠标悬停在文件输入标签上，然后工具提示显示为Vuetify's tooltip sample 有人给我建议吗？

Answer 1

来自您的代码：

<v-file-input
  ...
  v-on="on"
  @mouseover="showTooltip = !showTooltip"
  >
</v-file-input>

v-on="on" 的原因仅在单击而不是悬停时有效，因为 v-file-input 仅发出 focus 和 blur 事件，但不会发出 mouseenter、mouseleave 或 mouseover 事件。

由于v-file-input 不会发出mouseover 事件，您的showTooltip = !showTooltip 代码实际上不会被执行。

你可以使用native修饰符来解决这个问题：

<v-file-input
  ...
  @mouseenter.native="on.mouseenter"
  @mouseleave.native="on.mouseleave"
  >
</v-file-input>

Example