Vuetify 3 v-file-input可点击芯片交互异常求助

问题根源 #

Vuetify 3 的 v-file-input 组件内部，原生 <input> 元素采用绝对定位覆盖了整个组件区域，优先级高于 selection 插槽内的自定义内容，导致插槽中的芯片无法接收悬浮、点击等交互事件。

解决方案 #

方案1：提升插槽内容层级 #

通过给 selection 插槽内的内容添加相对定位和更高的 z-index，让芯片组件跳出原生输入框的遮挡范围，正常响应交互事件。

示例代码：

<v-file-input multiple>
  <template v-slot:selection="{ files, remove }">
    <!-- 外层容器设置相对定位和z-index -->
    <div style="position: relative; z-index: 1; display: flex; gap: 0.5rem; flex-wrap: wrap;">
      <v-chip
        v-for="file in files"
        :key="file.name"
        closable
        @close="remove(file)"
        variant="outlined"
      >
        {{ file.name }}
      </v-chip>
    </div>
  </template>
</v-file-input>

方案2：修改组件内部样式（深度选择器） #

通过 CSS 深度选择器调整原生输入框的事件响应范围，仅保留文件选择按钮的交互能力，让插槽内容可以正常触发事件。

示例样式：

/* 禁用原生输入框的全局事件响应 */
:deep(.v-file-input__input) {
  pointer-events: none;
}

/* 恢复文件选择按钮的交互 */
:deep(.v-file-input__button) {
  pointer-events: auto;
}

/* 确保插槽内容可以接收事件 */
:deep(.v-file-input__selection) {
  pointer-events: auto;
}

说明 #

两种方案都无需降级到 Vuetify 2，方案1更轻量化，仅针对插槽内容调整层级；方案2更彻底，适合需要自定义组件整体交互逻辑的场景。

内容的提问来源于stack exchange，提问作者Thomas Busser