はじめに

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



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

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

バージョン

Vue 3.4.9
Vuetify 3.5.6

truncate-lengthは利用できない

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

しかし、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の記述があるのに対し、最新版には存在しませんでした。。

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

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

代替手段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属性が利用できなくなってしまったのか、、便利そうなのに。
何か情報ある方、他に良い方法をご存知の方はぜひコメントお願いいたします！