如何判断Vuetify文本输入框能否完整显示内容？

我在多列表格中使用Vuetify text-field组件，当内容过多时无法完整显示。从UX角度看，大量单元格里的输入框滚动查看内容效率很低。

我的初步思路是用tooltip展示完整内容，但如果内容能完整显示，tooltip反而会造成干扰，所以希望仅在内容被截断时才显示tooltip。现在需要解决的是：如何判断组件内容是否被截断？另外表格性能很重要，不确定值变化时的复杂计算是否划算。

我尝试了如下实现：

<script setup>
  import { ref, watch } from '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 // !!! 这里需要正确计算输入内容的宽度 !!!

      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为undefined
• 不知道如何正确计算inputValueWidth

1. 解决初始化时inputWidth为undefined的问题 #

组件初始化时DOM还未完全挂载，直接访问field.value会获取不到。可以用Vue的onMounted钩子配合nextTick，确保DOM渲染完成后再进行计算；同时监听窗口resize事件，避免容器宽度变化时判断失效。

2. 正确计算输入内容的宽度 #

不能用字符长度直接替代宽度，因为不同字符（比如中文、英文、特殊符号）的宽度差异很大。正确的做法是创建一个隐藏的“镜像元素”，和输入框使用完全相同的样式（字体、字号、内边距等），把输入内容放到这个元素里，然后获取它的宽度，这样就能得到内容实际需要的宽度。

优化后的实现示例 #

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

const field = ref()
const msg = ref('Hello World! 这个文本框里的内容太多，无法完整显示。')
const isCuttingOff = ref(false)
const mirrorSpan = ref()

// 判断内容是否截断的核心函数
const checkIsCuttingOff = () => {
  if (!field.value || !mirrorSpan.value) return

  // 获取输入框的可用宽度（减去内边距）
  const inputEl = field.value.$el.querySelector('input')
  const inputStyle = window.getComputedStyle(inputEl)
  const inputAvailableWidth = inputEl.clientWidth - 
    parseFloat(inputStyle.paddingLeft) - 
    parseFloat(inputStyle.paddingRight)

  // 同步镜像元素的内容和样式
  mirrorSpan.value.textContent = msg.value
  mirrorSpan.value.style.font = inputStyle.font
  mirrorSpan.value.style.whiteSpace = 'nowrap'

  // 比较内容宽度和输入框可用宽度
  isCuttingOff.value = mirrorSpan.value.offsetWidth > inputAvailableWidth
}

watch(msg, () => {
  nextTick(checkIsCuttingOff)
}, { immediate: true })

onMounted(() => {
  nextTick(checkIsCuttingOff)
  // 监听窗口 resize，适配宽度变化
  window.addEventListener('resize', checkIsCuttingOff)
})
</script>

<template>
  <v-app>
    <div class="text-h3">是否截断: {{ isCuttingOff }}</div>
    <v-container class="w-25">
      <v-text-field 
        ref="field" 
        label="示例输入框" 
        v-model="msg"
        :tooltip="isCuttingOff ? msg : undefined"
      />
      <!-- 隐藏的镜像元素，用于计算内容宽度 -->
      <span ref="mirrorSpan" class="hidden" style="position: absolute; top: -9999px; left: -9999px;"></span>
    </v-container>
  </v-app>
</template>

<style>
.hidden {
  visibility: hidden;
}
</style>

性能优化建议 #

• 对于表格中的大量输入框，不要每个都实时监听输入变化，可以在输入框聚焦/失焦时触发判断，或者使用防抖函数（比如lodash.debounce）减少计算频率。
• 镜像元素可以复用，不需要每个输入框都创建一个，通过动态修改内容来计算不同输入框的内容宽度。

内容的提问来源于stack exchange，提问作者baitendbidz