Comment puis-je m'assurer que le champ de saisie est suffisamment large pour afficher entièrement le contenu ?

Question

J'utilise le composant Vuetify TextField dans un tableau avec plusieurs colonnes. Peut-être que le composant contient trop de contenu à afficher et, du point de vue de l'expérience utilisateur, inspecter le contenu en faisant défiler le champ prendrait trop de temps s'il y a beaucoup de cellules.

Exemple HTML pur

Exemple Vuetify

Ma première idée (si vous avez une meilleure idée, faites-le moi savoir) est d'afficher une info-bulle pour afficher l'intégralité du contenu, mais cela serait ennuyeux si le composant est capable d'afficher l'intégralité du contenu. Je souhaite donc afficher l'info-bulle uniquement lorsque le contenu est masqué/tronqué.

Existe-t-il donc un moyen de savoir si le composant affiche le contenu complet ou s'il y a du contenu masqué/tronqué ? (Les performances des tables sont importantes, donc je ne sais pas si cela vaut la peine de faire des calculs très complexes lorsque les valeurs changent)

J'ai essayé

(Aire de jeux)

<configuration du script>
  importer { ref, watch } depuis 'vue'

  champ const = ref()
  const msg = réf(
    "Bonjour tout le monde ! Il y a trop de contenu à afficher dans ce composant de champ de texte."
  )
  const isCuttingOff = ref (faux)

  montre(
    message,
    () =>
      const inputWidth = field.value?.clientWidth
      const inputValueWidth = msg.value.length // !!! mesurez la valeur d'entrée ici !!!

      console.log({ inputWidth, inputValueWidth })

      isCuttingOff.value = inputWidth <
    },
    { immédiat : vrai }
  )
</script>

<modèle>
  <v-app>
    <div class="text-h3">Coupe : {{ isCuttingOff }}</div>
    <classe v-container="w-25">
      <v-text-field ref="champ" label="fsfdsf" v-model="msg" />
    </v-conteneur>
  </v-app>
</template>

Mais

• Au démarrage, la variable inputWidth
• Je ne sais pas comment calculer la variable inputValueWidth

Answer 1

Utilisez CSS pour afficher le débordement du texte, comme .... (points de suspension), et utilisez l'attribut title pour afficher l'intégralité du contenu au survol, comme une popup

<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

En modifiant votre code, j'ai réussi à comparer celui de la zone de texte clientWidth和scrollWidth.

1- Citations fieldéliminées.

2- Ajout d'un identifiant à v-text-field.

3- Ajout d'une fonction de rappel check函数，并在watch pour l'appeler.

4- Dans la fonction check, j'ai coché le check函数内部，我检查了输入框的clientWidth和scrollWidth de la zone de saisie.

5- Afin de l'exécuter au chargement initial, j'ai attribué msg à une chaîne vide et je l'ai changé en chaîne brute au bas du script.

Découvrez-le ici : Ici

<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>