【Vuetify3】ファイル名が長すぎたら省略して表示したい

はじめに

Vuetifyの<v-file-input>タグでは、ファイル名が長いときに入力欄からはみ出してしまいます。

長いファイル名がはみ出す

この問題の対処法を調べたのでまとめておきます。

バージョン

• Vue 3.4.9
• Vuetify 3.5.6

truncate-lengthは利用できない

調べてみると、Vuetify2ではtruncate-length属性を設定することで、一定以上の文字数になったときにtruncateしてくれるようでした。

• [Bug Report] File input truncated to fixed amount of characters
• how to alter truncate-length in v-file-input of vuetify on responsive?

しかし、Vuetify3ではtruncate-length属性は使用できないようです。

• [Feature Request] Auto truncate length for v-file-input

  Why is the truncate-length prop removed in the latest version?

公式ドキュメントのv-file-input APIのページを見ると、Vuetify2ではtruncate-lengthの記述があるのに対し、最新版には存在しませんでした。。

• v2のv-file-input API
• 最新版のVFileInput API

一応試してみましたが、やはり効きませんでした。

諦めて他の手を考えます。

代替手段text-truncateの利用

クラス名にtext-truncateを指定することで意図通りの動作になりました。

はみ出さずに切り詰められる

• Text and typography

truncate-lengthと異なり文字数は指定できませんが、入力欄の幅に合わせてtruncateしてくれます。

サンプルコード

<template>
  <v-app>
    <v-container>
      <div>
        <v-file-input label="File input" class="text-truncate"></v-file-input>
      </div>
    </v-container>
  </v-app>
</template>

<style scoped>
  .v-file-input {
    width: 200px;
  }
</style>

終わりに

なぜVuetify3でtruncate-length属性が利用できなくなってしまったのか、、便利そうなのに。
何か情報ある方、他に良い方法をご存知の方はぜひコメントお願いいたします！