# File inputs

v-file-inputコンポーネントは、ファイルを選択するためのクリーンなインターフェイスを提供し、詳細な選択情報やアップロードの進捗状況を表示する特殊な入力です。 これは、標準ファイル入力の直接の代替となるように意図されています。

# 使い方

その中核をなす v-file-input コンポーネントは、v-text-field を拡張した基本的なコンテナです。

# API

# サンプル

# Props

# Accept

v-file-input コンポーネントは特定のメディアフォーマット/ファイルタイプのみを受け付けることができます。 詳細については、 accept 属性 のドキュメントを参照してください。

# Chips

選択したファイルを chipとして表示することができます。 chipsmultiple propsを使用すると、(ファイル数ではなく)各チップが表示されます。

# Counter

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

# Dense

dense プロパティでfile inputの高さを減らすことができます。

# Multiple

v-file-input は、 multiple prop を使用するときに、同時に複数のファイルを含めることができます。

# Prepend icon

v-file-input には、コンポーネントに設定したり、グローバルに調整したりできるデフォルトの prepend-icon があります。 グローバルコンポーネントの変更に関する詳細は、 アイコンのカスタマイズ ページ をご覧ください。

# サイズの表示

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

# バリデーション

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

# Slots

# Selection

selection スロットを使用して、入力選択の外観をカスタマイズできます。 通常、これはchipsで行われますが、コンポーネントやマークアップを使用することができます。

# その他

# 複雑な選択スロット

選択スロットの柔軟性により、複雑なユースケースに対応できます。 この例では、最初の 2 つの選択をチップとして表示し、残りの量の数値表示を追加します。

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:10/07/2024, 11:31:37 AM