如何确保输入字段足够宽以完整显示内容？

Question

我正在使用一个包含许多列的表格中的 Vuetify 文本字段组件。可能该组件包含的内容太多而无法显示，并且从用户体验的角度来看，如果有许多单元格，通过在字段内滚动来检查内容会花费太多时间。

纯 HTML 示例

Vuetify 示例

我的第一个想法（如果你有更好的想法，请告诉我）是显示一个工具提示来显示完整的内容，但是如果组件能够显示完整的内容，这样做会很烦人。因此，我只想在内容被隐藏/截断时显示工具提示。

那么有没有办法知道组件是否显示完整的内容，或者是否有内容被隐藏/截断？（表格性能很重要，所以我不知道在值更改时进行非常复杂的计算是否值得）

我尝试了

（游乐场）

<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 // !!! 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>