检测Vuetify文本输入框内容是否被截断的实用指南

<template>
  <v-app>
    <div class="text-h3">内容是否被截断: {{ isCuttingOff }}</div>
    <v-container class="w-25">
      <!-- 为 v-text-field 添加一个唯一的 ID -->
      <v-text-field id="txt" v-model="msg" label="文本内容" />
    </v-container>
  </v-app>
</template>

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

  const msg = ref("") // 用于绑定 v-text-field 的值
  const isCuttingOff = ref(false) // 存储检测结果

  // ... (检测逻辑将在下方实现)
</script>

  // ... (在 <script setup> 标签内)

  function checkContentTruncation() {
    const elm = document.querySelector('#txt') // 通过 ID 获取 DOM 元素
    if (elm) {
      // 比较 clientWidth 和 scrollWidth
      isCuttingOff.value = elm.clientWidth < elm.scrollWidth;
    }
  }

  // ... (在 <script setup> 标签内)

  watch(
    msg,
    () => {
      checkContentTruncation()
    },
    { immediate: true } // 立即执行一次监听器，以处理初始值
  )

  // ... (在 <script setup> 标签内)

  const msg = ref("") // 初始设置为空字符串
  const isCuttingOff = ref(false)

  function checkContentTruncation() {
    const elm = document.querySelector('#txt')
    if (elm) {
      isCuttingOff.value = elm.clientWidth < elm.scrollWidth;
    }
  }

  watch(
    msg,
    () => {
      // 确保在 DOM 更新后执行检测，尤其是在初始加载时
      // nextTick 是一个更稳健的选择，但这里我们依赖后续的 msg 赋值触发
      checkContentTruncation()
    },
    { immediate: true }
  )

  // 在脚本末尾设置实际的初始值，这将触发 watch 再次执行
  msg.value = 'Hello World! too much content in this text cfield component to display.'

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

  const msg = ref("") // 初始设置为空字符串，用于触发后续的DOM渲染和检测
  const isCuttingOff = ref(false)

  /**
   * 检查文本输入框内容是否被截断
   * 通过比较元素的 clientWidth 和 scrollWidth 来判断
   */
  function checkContentTruncation() {
    // 使用 document.querySelector 获取 DOM 元素，因为它在 Vuetify 组件内部
    // 如果是普通 HTML input，可以使用 ref 访问
    const elm = document.querySelector('#txt')
    if (elm) {
      // 当 scrollWidth 大于 clientWidth 时，表示内容被截断
      isCuttingOff.value = elm.clientWidth < elm.scrollWidth;
    }
  }

  // 监听 msg 变量的变化
  watch(
    msg,
    // 当 msg 变化时，在 DOM 更新周期之后执行检测函数
    // 使用 nextTick 可以确保在 DOM 元素渲染完毕后进行测量，避免初始加载时的测量不准确问题
    async () => {
      await nextTick() // 等待 DOM 更新
      checkContentTruncation()
    },
    { immediate: true } // 立即执行一次监听器，处理初始值
  )

  // 设置 v-text-field 的初始内容。
  // 这里的赋值操作会触发 watch 监听器，从而进行首次内容截断检测。
  // 结合 `msg.value = ""` 和 `immediate: true`，可以确保在组件挂载后，
  // 且 DOM 元素可用时，至少进行一次准确的检测。
  msg.value = 'Hello World! too much content in this text field component to display. This is a very long text to demonstrate truncation.'
</script>

<template>
  <v-app>
    <v-container class="w-50">
      <div class="text-h4 mb-4">内容是否被截断: <span :class="isCuttingOff ? 'text-red' : 'text-green'">{{ isCuttingOff }}</span></div>
      <v-text-field
        id="txt"
        v-model="msg"
        label="文本内容"
        variant="outlined"
        clearable
        density="compact"
        hint="尝试调整浏览器窗口大小或修改文本内容"
      />

      <v-alert
        v-if="isCuttingOff"
        type="warning"
        class="mt-4"
        icon="mdi-alert-circle-outline"
      >
        <template v-slot:title>内容被截断！</template>
        <template v-slot:text>
          部分文本内容无法完全显示。您可能需要提供一个工具提示或展开选项来显示完整内容。
        </template>
      </v-alert>
      <v-alert
        v-else
        type="success"
        class="mt-4"
        icon="mdi-check-circle-outline"
      >
        <template v-slot:title>内容完整显示</template>
        <template v-slot:text>
          所有文本内容均已完整显示，无需额外操作。
        </template>
      </v-alert>
    </v-container>
  </v-app>
</template>

<style scoped>
/* 可以在这里添加一些样式 */
</style>