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