Vuetify

ショップ

企業向け

v-file-inputコンポーネントは、ファイルを選択するためのクリーンなインターフェースを提供する特殊な入力であり、詳細な選択情報とアップロードの進行状況を表示します。これは、標準のファイル入力を直接置き換えるものです。

v-file-inputコンポーネントはv-text-field を拡張するコンテナです。

Options

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

multiple propを使用すると、v-file-input で一度に複数ファイルを指定できます。

v-file-inputコンポーネントは、必要に応じて特定のメディア形式/ファイルタイプのみを受け入れることができます。詳細については、accept属性 のドキュメントをご覧ください。

選択したファイルは チップ として表示できます。 chipsmultiple propを使用する場合、(ファイル数表示と異なり) それぞれのチップで表示されます。

選択したファイルのサイズ表示は、show-size プロパティで設定できます。サイズは 1024 (true を指定する場合にデフォルト) または 1000 のいずれかです。

show-sizeプロパティをcounterと一緒に使用すると、ファイル総数と合計サイズが入力部の下に表示されます。

v-file-inputにはデフォルトで付加されたアイコンがあり、これをコンポーネントに設定したり、グローバルに調整することができます。グローバルコンポーネントの変更に関する詳細な情報は、アイコンのカスタマイズページ を参照してください。

dense propでfile inputの高さを低くできます。

selection slotを使うと、入力された選択項目の外観をカスタマイズすることができます。これは通常は chips で行われますが、どんなコンポーネントやマークアップでも使用できます。

他の入力と同様に、rules propを使用して独自のカスタムバリデーションパラメータを作成できます。

選択スロットの柔軟性により、複雑なユースケースにも対応できます。この例では、複数ファイル選択時に、最初の2つの選択項目をチップとして、残りをインジケーターとして表示しています。

準備はいいですか? 以下から続きが読めます。

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