如何確保輸入欄位足夠寬以完整顯示內容？

Question

我正在使用一個包含許多列的表格中的 Vuetify 文字欄位元件。可能該元件包含的內容太多而無法顯示，並且從使用者體驗的角度來看，如果有許多單元格，透過在欄位內滾動來檢查內容會花費太多時間。

純 HTML 範例

Vuetify 範例

我的第一個想法（如果你有更好的想法，請告訴我）是顯示一個工具提示來顯示完整的內容，但是如果元件能夠顯示完整的內容，這樣做會很煩​​人。因此，我只想在內容被隱藏/截斷時顯示工具提示。

那麼有沒有辦法知道元件是否顯示完整的內容，或者是否有內容被隱藏/截斷？ （表格效能很重要，所以我不知道在值更改時進行非常複雜的計算是否值得）

我試了

（遊樂場）

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

  const field = ref()
  const msg = ref(
    'Hello World! too much content in this text field component to display.'
  )
  const isCuttingOff = ref(false)

  watch(
    msg,
    () => {
      const inputWidth = field.value?.clientWidth
      const inputValueWidth = msg.value.length // !!! measure the input value here !!!

      console.log({ inputWidth, inputValueWidth })

      isCuttingOff.value = inputWidth < inputValueWidth
    },
    { immediate: true }
  )
</script>

<template>
  <v-app>
    <div class="text-h3">Is cutting off: {{ isCuttingOff }}</div>
    <v-container class="w-25">
      <v-text-field ref="field" label="fsfdsf" v-model="msg" />
    </v-container>
  </v-app>
</template>

但是

• 啟動時，變數inputWidth是未定義的
• 我不知道如何計算變數inputValueWidth

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>