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，{{ 1}} 或 mouseleave 事件。

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

您可以使用 showTooltip = !showTooltip 修饰符解决此问题：

native

Example

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

1 个答案: