Wie stelle ich sicher, dass das Eingabefeld breit genug ist, um den Inhalt vollständig anzuzeigen?

Question

Ich verwende die Vuetify TextField-Komponente in einer Tabelle mit vielen Spalten. Möglicherweise enthält die Komponente zu viel Inhalt, um angezeigt zu werden, und aus Sicht des Benutzererlebnisses würde die Überprüfung des Inhalts durch Scrollen innerhalb des Felds bei vielen Zellen zu viel Zeit in Anspruch nehmen.

Reines HTML-Beispiel

Vuetify-Beispiel

Meine erste Idee (wenn Sie eine bessere Idee haben, lassen Sie es mich bitte wissen) ist die Anzeige eines Tooltips, um den vollständigen Inhalt anzuzeigen. Dies wäre jedoch ärgerlich, wenn die Komponente den vollständigen Inhalt anzeigen kann. Daher möchte ich den Tooltip nur anzeigen, wenn der Inhalt ausgeblendet/abgeschnitten ist.

Gibt es also eine Möglichkeit herauszufinden, ob die Komponente den vollständigen Inhalt anzeigt oder ob es Inhalte gibt, die ausgeblendet/abgeschnitten sind? (Die Tabellenleistung ist wichtig, daher weiß ich nicht, ob es sich lohnt, sehr komplexe Berechnungen durchzuführen, wenn sich Werte ändern.)

Ich habe es versucht

(Spielplatz)

<script setup>
  { ref, watch } aus 'vue' importieren

  const field = ref()
  const msg = ref(
    „Hallo Welt! Zu viel Inhalt in dieser Textfeldkomponente, um angezeigt zu werden.“
  )
  const isCuttingOff = ref(false)

  betrachten(
    Nachricht,
    () =>
      const inputWidth = field.value?.clientWidth
      const inputValueWidth = msg.value.length // !!! Messen Sie hier den Eingabewert !!!

      console.log({ inputWidth, inputValueWidth })

      isCuttingOff.value = inputWidth < inputValueWidth
    },
    {unmittelbar: wahr}
  )
</script>

<Vorlage>
  <v-app>
    <div class="text-h3">Schnitt ab: {{ isCuttingOff }}</div>
    <v-container class="w-25">
      <v-text-field ref="field" label="fsfdsf"
    </v-container>
  </v-app>
</template>

Aber

• Beim Start ist die Variable inputWidth undefiniert
• Ich weiß nicht, wie ich die Variable inputValueWidth
berechnen soll.

Answer 1

使用CSS来显示文本的溢出，例如....（省略号），并使用title属性在悬停时显示完整内容，类似弹出窗口

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World! too much content in this text field component to display')
</script>

<template>
  <h1 :title=msg>{{ msg }}</h1>
  <input v-model="msg">
</template>

<style>
  h1{
    max-width: 15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

Answer 2

通过修改您的代码，我成功地比较了文本框的clientWidth和scrollWidth。

1- 消除了field引用。

2- 给v-text-field添加了一个id。

3- 添加了一个check函数，并在watch回调函数中调用它。

4- 在check函数内部，我检查了输入框的clientWidth和scrollWidth。

5- 为了在初始加载时运行它，我将msg赋值为空字符串，并在脚本底部将其更改为原始字符串。

在此处查看：这里

<script setup>
  import { ref, watch } from 'vue'

  const msg = ref("")

  const isCuttingOff = ref(false)

  function check() {
    const elm = document.querySelector('#txt')
    isCuttingOff.value = elm.clientWidth < elm.scrollWidth;
    // todo : custom tooltip or any other solution for long texts
  }

  watch(
    msg,
    (currentMsg, oldMessage, callback) => {
      callback(check)
    },
    { immediate: true }
  )

  msg.value =
    'Hello World! too much content in this text cfield component to display.'
</script>
<script></script>
<template>
  <v-app>
    <div class="text-h3">Is cutting off: {{ isCuttingOff }}</div>
    <v-container class="w-25">
      <v-text-field id="txt" v-model="msg" />
    </v-container>
  </v-app>
</template>