如何确保输入字段足够宽以完整显示内容？
P粉014218124
2023-09-02 22:36:56
<p>我正在使用一个包含许多列的表格中的 Vuetify 文本字段组件。可能该组件包含的内容太多而无法显示，并且从用户体验的角度来看，如果有许多单元格，通过在字段内滚动来检查内容会花费太多时间。</p>
<p>纯 HTML 示例</p>
<p>Vuetify 示例</p>
<p>我的第一个想法（如果你有更好的想法，请告诉我）是显示一个工具提示来显示完整的内容，但是如果组件能够显示完整的内容，这样做会很烦人。因此，我只想在内容被隐藏/截断时显示工具提示。</p>
<p>那么有没有办法知道组件是否显示完整的内容，或者是否有内容被隐藏/截断？（表格性能很重要，所以我不知道在值更改时进行非常复杂的计算是否值得）</p>
<p>我尝试了</p>
<p>（游乐场）</p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>但是</p>
<ul>
<li>在启动时，变量<code>inputWidth</code>是未定义的</li>
<li>我不知道如何计算变量<code>inputValueWidth</code></li>
</ul></p>
使用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>通过修改您的代码，我成功地比较了文本框的
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>