入力フィールドがコンテンツを完全に表示するのに十分な幅であることを確認するにはどうすればよいですか?

Question

<p>多くの列があるテーブルで Vuetify TextField コンポーネントを使用しています。コンポーネントに含まれるコンテンツが多すぎて表示できない可能性があり、ユーザー エクスペリエンスの観点から、セルが多い場合、フィールド内をスクロールしてコンテンツを検査すると時間がかかりすぎます。 </p> <p>純粋な HTML の例</p> <p>Vuetify の例</p> <p>私の最初の考えは (もっと良いアイデアがある場合はお知らせください)、完全なコンテンツを表示するツールチップを表示することですが、コンポーネントが完全なコンテンツを表示できる場合、これは煩わしいでしょう。したがって、コンテンツが非表示または切り捨てられている場合にのみツールチップを表示したいと考えています。 </p> <p>では、コンポーネントが完全なコンテンツを表示しているか、それとも非表示または切り詰められたコンテンツがあるかを知る方法はあるのでしょうか? (テーブルのパフォーマンスは重要なので、値が変化したときに非常に複雑な計算を行う価値があるかどうかはわかりません) </p> <p>やってみました</p> <p>(遊び場)</p> <pre class="brush:php;toolbar:false;"><スクリプトのセットアップ> 'vue' から { ref, watch } をインポートします const フィールド = ref() const msg = ref( 「Hello World! このテキスト フィールド コンポーネントには表示できないコンテンツが多すぎます。」 ） const isCuttingOff = ref(false) 時計（ メッセージ、 () => { const inputWidth = field.value?.clientWidth const inputValueWidth = msg.value.length // !!! ここで入力値を測定します !!! console.log({ inputWidth, inputValueWidth }) isCuttingOff.value = inputWidth < inputValueWidth }、 {即時: true } ） </スクリプト> <テンプレート> <v-アプリ> <div class="text-h3">切断中です: {{ isCuttingOff }}</div> <v-container class="w-25"> <v-text-field ref="field" label="fsfdsf" v-model="msg" /> </v-container> </v-app> </template></pre> <p>でも</p>

<li>起動時、変数 <code>inputWidth</code> は未定義です</li> <li>変数 <code>inputValueWidth</code></li> の計算方法がわかりません。 </ul><

Answer 1

CSS を使用して、.... (省略記号) などのテキストのオーバーフローを表示し、title 属性を使用して、カーソルを置くとポップのように完全なコンテンツを表示します。 -アップウィンドウ

リーリー

Answer 2

コードを変更することで、テキストボックスの clientWidth と scrollWidth を正常に比較できました。

1- field 参照を削除しました。

2- v-text-field に ID を追加しました。

3- check 関数を追加し、watch コールバック関数で呼び出しました。

4- check 関数内で、入力ボックスの clientWidth と scrollWidth をチェックしました。

5- 初期ロード時に実行するために、msg を空の文字列に割り当て、スクリプトの下部にある元の文字列に変更しました。

ここで見る: ここ

リーリー