Vuetify 3 v-file-input 可点击标签无法触发交互问题：解决方法和常见问题解答

2024-03-16 15:43:22

Vuetify 3 v-file-input 可点击标签：解决无法触发交互的问题

简介

在 Vuetify 3 中使用 v-file-input 时，你可能会遇到一个棘手的难题：无法点击或悬停选择插槽中的可关闭标签。本文将深入探讨这个问题的根源，并提供解决方法。

问题根源

Vuetify 2 中的 v-file-input 允许你使用 selection 插槽自定义已选择文件的显示方式。然而，在 Vuetify 3 中，输入框被赋予了更高的优先级，标签现在位于一个与输入框不同的元素中。这种设计导致无法与标签进行任何用户交互，包括删除文件。

解决方法

以下是一些解决此问题的有效方法：

1. 自定义插槽

你可以通过自定义 selection 插槽来创建自己的可关闭标签。创建一个自定义组件，负责标签的显示和交互。

<template>
  <div>
    <v-btn icon @click="onDelete">
      <v-icon>close</v-icon>
    </v-btn>
    <span>{{ file.name }}</span>
  </div>
</template>

export default {
  props: ['file'],
  methods: {
    onDelete() {
      // 处理删除文件逻辑
    }
  }
}

然后，将这个组件用作 selection 插槽：

<v-file-input :multiple="true">
  <template #selection="{ files, remove }">
    <div v-for="file in files" :key="file.name">
      <CustomFileListItem :file="file" @delete="remove(file)" />
    </div>
  </template>
</v-file-input>

2. 使用 v-touch 指令

v-touch 指令允许你将点击事件附加到任何元素，即使该元素不可点击。以下是如何使用 v-touch 指令：

<v-file-input :multiple="true">
  <template #selection="{ files, remove }">
    <div v-for="file in files" :key="file.name">
      <div @click="remove(file)" v-touch>
        <span>{{ file.name }}</span>
      </div>
    </div>
  </template>
</v-file-input>