Bagaimanakah cara saya memastikan bahawa medan input cukup luas untuk memaparkan kandungan sepenuhnya?

Question

Saya menggunakan komponen Vuetify TextField dalam jadual dengan banyak lajur. Mungkin komponen itu mengandungi terlalu banyak kandungan untuk dipaparkan dan dari perspektif pengalaman pengguna memeriksa kandungan dengan menatal dalam medan akan mengambil terlalu banyak masa jika terdapat banyak sel.

Contoh HTML tulen

Contoh Vuetify

Idea pertama saya (jika anda mempunyai idea yang lebih baik, sila beritahu saya) ialah untuk menunjukkan petua alat untuk menunjukkan kandungan penuh, tetapi ini akan menjengkelkan jika komponen itu mampu menunjukkan kandungan penuh. Jadi saya hanya mahu menunjukkan petua alat apabila kandungan disembunyikan/dipotong.

Jadi adakah terdapat cara untuk mengetahui sama ada komponen itu menunjukkan kandungan lengkap atau jika terdapat kandungan yang tersembunyi/dipotong? (Prestasi jadual adalah penting, jadi saya tidak tahu sama ada ia berbaloi untuk melakukan pengiraan yang sangat kompleks apabila nilai berubah)

Saya cuba

(Taman Permainan)

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

  medan const = ref()
  const msg = ref(
    'Hello World! terlalu banyak kandungan dalam komponen medan teks ini untuk dipaparkan.'
  )
  const isCuttingOff = ref(false)

  menonton (
    mesej,
    () =>
      const inputWidth = field.value?.clientWidth
      const inputValueWidth = msg.value.length // !!! ukur nilai input di sini !!!

      console.log({ inputWidth, inputValueWidth })

      isCuttingOff.value = inputWidth <
    },
    { segera: benar }
  )
</skrip>

<template>
  <v-app>
    <div class="text-h3">Sedang terputus: {{ isCuttingOff }}</div>
    <v-kelas bekas="w-25">
      <v-text-field ref="field"label="fsfdsf"v-model="msg"
    </v-bekas>
  </v-app>
</template>

Tetapi

• Pada permulaan, pembolehubah inputWidth
• Saya tidak tahu cara mengira pembolehubah inputValueWidth

Answer 1

Gunakan CSS untuk menunjukkan limpahan teks, seperti .... (elipsis) dan gunakan atribut title untuk menunjukkan kandungan penuh pada tuding, seperti pop timbul

<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

Dengan mengubah suai kod anda, saya berjaya membandingkan clientWidth和scrollWidth kotak teks.

1- Dihapuskan field sebut harga.

2- Menambah id pada v-text-field.

3- Menambah fungsi panggil balik check函数，并在watch untuk memanggilnya.

4- Di dalam fungsi check, saya telah menyemak check函数内部，我检查了输入框的clientWidth和scrollWidth kotak input.

5- Untuk menjalankannya pada beban awal, saya menetapkan msg pada rentetan kosong dan menukarnya kepada rentetan mentah di bahagian bawah skrip.

Lihat di sini: Di sini

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