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

我想使用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>

文件\添加\示例\代码
{{fileName}}
从“nuxt属性装饰器”导入{Component，Vue}
@组件（{}）
导出默认类扩展Vue{
showTooltip:boolean=false
文件名：字符串=“”
异步getFileObject（文件：file）{
this.fileName=await file.name
}
}

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

根据您的代码：

由于

v-file-input

仅发出

focus

和

blur

事件，而非

mouseenter

，

mouseleave

或

mouseover

事件，因此

v-on=“on”

的原因仅在单击但不悬停时有效

由于

v-file-input

不会发出

mouseover

事件，因此您的

showTooltip=！showTooltip

代码将不会实际执行

您可以使用

native

修饰符解决此问题：

---

您为什么不使用

v-file-input

的正常功能来显示控件中的文件名？谢谢您的评论，很抱歉回复太晚！在我的最新项目中，我需要获取file对象以将其放入RestAPI。所以，我在代码中使用了“getFileObject”方法。很抱歉，缺少信息。我清楚地理解了为什么我的代码不起作用。我需要添加本机修饰符来使用我使用的evet。我觉得我需要了解vue.js组件。非常感谢你的回答！这对我很有帮助！我在JSFIDLE和我的开发环境中确认了您的示例conde。我对你的代码有一个问题。为什么像“on.mouseenter”和“on.mouseleave”这样的方法会定义为事件处理程序的方法，mouseenter和mouseleave事件会起作用？很抱歉这个问题，但我的第一个载体是Vue.js，所以我缺乏关于DOM和HTML的知识。“若你们有时间，你们能给我一些建议吗？”我找到了这个，它很好地解释了激活剂。你们看。语法

v-on='someObject'

称为对象语法，不支持任何修饰符。因此，我使用

@mouseenter.native=“on.mouseenter”

绑定本机事件。