Vue.js 中 v-text-field 文本溢出检测及动态提示实现

import { ref, watch, onMounted, nextTick } from 'vue';

const msg = ref(''); // 用于绑定 v-text-field 的内容
const isCuttingOff = ref(false); // 存储是否溢出的状态
const textFieldRef = ref(null); // 用于获取 v-text-field 组件实例的引用

/**
 * 检查文本是否溢出
 */
const checkOverflow = async () => {
  // 使用 nextTick 确保 DOM 在内容更新后已渲染完毕
  await nextTick();

  // 获取 v-text-field 组件内部的原生 <input> 元素
  // textFieldRef.value 是组件实例，其 $el 属性是组件的根 DOM 元素
  // 然后通过 querySelector 找到内部的 <input> 元素
  const inputElement = textFieldRef.value?.$el?.querySelector('input');

  if (inputElement) {
    // 比较 scrollWidth 和 clientWidth
    isCuttingOff.value = inputElement.scrollWidth > inputElement.clientWidth;
  } else {
    // 如果获取不到 inputElement，则认为没有溢出（或处于加载状态）
    isCuttingOff.value = false;
  }
};

// ... (之前的导入和变量声明)

watch(
  msg,
  () => {
    checkOverflow(); // 当 msg 变化时执行检测
  },
  { immediate: true } // 立即执行一次，用于初始加载
);

onMounted(() => {
  // 在组件挂载后设置初始内容。
  // 这将触发 watch，进而执行 checkOverflow。
  msg.value = 'Hello World! too much content in this text field component to display.';
  // 额外调用一次 checkOverflow 确保在 onMounted 阶段，即使 msg 初始值为空，也能进行首次检测
  checkOverflow();
});

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

const msg = ref(''); // 绑定到 v-text-field 的内容
const isCuttingOff = ref(false); // 文本是否溢出的状态
const textFieldRef = ref(null); // 用于获取 v-text-field 组件实例的引用

/**
 * 检查 v-text-field 内部的文本是否溢出其可视区域。
 * 通过比较原生 input 元素的 scrollWidth 和 clientWidth 来判断。
 */
const checkOverflow = async () => {
  // 使用 nextTick 确保在 DOM 更新后执行检测，避免在渲染未完成时获取到旧的尺寸。
  await nextTick();

  // 获取 v-text-field 组件内部的原生 <input> 元素。
  // textFieldRef.value