Vuetify

商店

企业版

v-file-input 组件是一个特殊的表单,它为选择文件,展示选中文件,展示上传进度提供了美观的界面,旨在取代标准的文件上传表单。

组件 v-file-input 的核心是一个普通的基于 v-text-field 的容器

Options

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

使用 multiple 属性时,v-file-input 可以同时包含多个文件。

组件 v-file-input 可以仅接受特殊的你想要的媒体或文件格式。想要获取更多信息,请查看 accept attribute 的文档

选中的文件可以以 chip 的形式展示 。当带有 chipsmultiple 参数时,每一个标签将显示(相对于文件计数)。

所选文件的显示的大小可以使用 show-size 属性进行配置。 显示的大小可以是 1024 (提供 true 时使用的默认值) 或 _1000_。

当使用 show-size 属性和 counter 时,将在输入下显示文件的总数和大小。

v-file-input 有一个默认的预设图标,可以在组件上设置或全局调整。 关于不断变化的全局组件的更多信息可在 customizing icons page

您可以使用 dense 属性降低文件输入高度。

使用 selection 插槽,您可以自定义输入选择的外观。 通常使用 chips 完成此操作,但是可以使用任何组件或标记。

与其他输入类似,您可以使用 rules 属性来创建您自己的自定义验证参数。

选择插槽的灵活性使您可以适应复杂的用例。 在此示例中,我们将前两个选择显示为筹码,同时为剩余金额添加数字指示符。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!