检测Vue/Vuetify文本输入框内容截断的实用技巧

<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" label="输入内容" />
    </v-container>
  </v-app>
</template>

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

  // 用于存储文本框内容的响应式变量
  const msg = ref("")
  // 用于存储内容是否被截断的响应式状态
  const isCuttingOff = ref(false)

  /**
   * 检查文本框内容是否被截断的函数。
   * 通过比较元素的 clientWidth 和 scrollWidth 来判断。
   */
  function check() {
    // 使用 document.querySelector 获取 DOM 元素
    const elm = document.querySelector('#txt')
    if (elm) {
      // 获取 v-text-field 内部的实际输入元素，通常是 input 标签
      const inputElement = elm.querySelector('input');
      if (inputElement) {
        // 比较 input 元素的 clientWidth 和 scrollWidth
        isCuttingOff.value = inputElement.clientWidth < inputElement.scrollWidth;
      }
    }
  }

  // 监听 msg 变量的变化
  watch(
    msg,
    // watch 的回调函数，当 msg 变化时触发
    // 注意：这里的 callback 参数是 Vue 3 watch 的一个高级用法，
    // 它允许你在 DOM 更新后执行一个副作用函数。
    // 这与 Vue.nextTick 类似，确保在测量 DOM 之前，视图已经更新。
    (currentMsg, oldMessage, callback) => {
      // 在 DOM 更新后执行 check 函数
      callback(check)
    },
    { immediate: true } // immediate: true 确保在组件挂载时立即执行一次 watch 回调
  )

  // 初始加载时，先将 msg 设置为空字符串，
  // 触发 watch 立即执行一次 check（此时 clientWidth 和 scrollWidth 可能未完全就绪），
  // 然后再赋真实值，确保在 DOM 稳定后进行准确测量。
  // 这是一个处理初始渲染时机的小技巧。
  msg.value = 'Hello World! too much content in this text cfield component to display.'
</script>

<template>
  <v-app>
    <div class="text-h3">Is cutting off: {{ isCuttingOff }}</div>
    <v-container class="w-25">
      <!-- 给 v-text-field 绑定一个模板引用 -->
      <v-text-field ref="textFieldRef" v-model="msg" label="输入内容" />
    </v-container>
  </v-app>
</template>

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

  const msg = ref("")
  const isCuttingOff = ref(false)
  // 创建一个模板引用
  const textFieldRef = ref(null)

  async function check() {
    // 通过模板引用获取 v-text-field 组件实例
    // Vuetify 组件实例通常有一个 $el 属性指向其根 DOM 元素
    // 或者直接访问其内部的 input 元素
    const componentEl = textFieldRef.value?.$el;
    if (componentEl) {
      const inputElement = componentEl.querySelector('input'); // 获取实际的 input 元素
      if (inputElement) {
        isCuttingOff.value = inputElement.clientWidth < inputElement.scrollWidth;
      }
    }
  }

  watch(
    msg,
    async () => {
      // 确保在 DOM 更新后执行检查
      await nextTick();
      check();
    },
    { immediate: true }
  )

  // 初始赋值
  msg.value = 'Hello World! too much content in this text cfield component to display.'
</script>