[英]How to use v-tooltip with v-file-input tag in Vuetify 2.0?
I want to use v-tooltip, when I input the file through v-file-input and mouse over the file name, file name will be showed popup like as v-tool-tip.我想使用 v-tooltip,当我通过 v-file-input 输入文件并将鼠标悬停在文件名上时,文件名将像 v-tool-tip 一样弹出。 So I tried to make code the following.
所以我试图使代码如下。
<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>
I ran this code and input file, file input was success and tooltip displayed but never disappear.我运行此代码并输入文件,文件输入成功并且工具提示显示但从未消失。 So, I thought using event handler in JS lie @mouseover in my code is correct my issue, but it seems not work.
所以,我认为在我的代码中使用 JS 中的事件处理程序谎言 @mouseover 是正确的我的问题,但它似乎不起作用。 My goal is when I mouseover on file-input tag, and then tooltip display like Vuetify's tooltip sample Does anyone advise me?
我的目标是当我将鼠标悬停在文件输入标签上,然后像Vuetify 的工具提示示例一样显示工具提示有人建议我吗?
From your code:从您的代码:
<v-file-input
...
v-on="on"
@mouseover="showTooltip = !showTooltip"
>
</v-file-input>
The reason for v-on="on"
will work only when click but not hovering because of v-file-input
only emit focus
and blur
events but not mouseenter
, mouseleave
nor mouseover
events. v-on="on"
的原因仅在单击而不是悬停时才有效,因为v-file-input
仅发出focus
和blur
事件,但不会发出mouseenter
、 mouseleave
或mouseover
事件。
And since v-file-input
does not emit mouseover
event, your showTooltip = !showTooltip
code will not actually be executed.而且由于
v-file-input
不会发出mouseover
事件,因此您的showTooltip = !showTooltip
代码实际上不会被执行。
You can solve this by using native
modifier:您可以通过使用
native
修饰符来解决此问题:
<v-file-input
...
@mouseenter.native="on.mouseenter"
@mouseleave.native="on.mouseleave"
>
</v-file-input>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.