Как проверить, достаточно ли велико поле ввода для отображения полного содержимого?
Я использую компонент текстового поля Vuetify внутри таблицы с множеством столбцов. Возможно, этот компонент содержит слишком много содержимого для отображения, и с точки зрения UX проверка содержимого путем прокрутки внутри поля, если ячеек много, занимает слишком много времени.
Моя первая идея (пожалуйста, дайте мне знать, если вы знаете лучшие) заключалась в том, чтобы отобразить всплывающую подсказку, показывающую полное содержимое, но это было бы раздражающим, если компонент может отображать полное содержимое. Поэтому я хочу отображать всплывающую подсказку только в том случае, если содержимое будет скрыто/отрезано.
Итак, есть ли способ узнать, отображает ли компонент полное содержимое или что-то скрыто/отрезано? (Производительность таблицы важна, поэтому я не знаю, стоят ли того очень сложные расчеты изменений значений)
Я пытался
( Детская площадка )
<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.info({ 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
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Мне удалось сравнить текстовое поле clientWidth с его scrollWidth, изменив код, как показано ниже.
1- Избавился от field ref.
2- Дал v-text-field идентификатор
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>
Вам просто нужен атрибут title и немного css
Использование 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>
Я попробовал ваш фрагмент на игровой площадке play.vuejs.org/#eNpFkLtug0AQRX/lhoakIBZFGoItpcsfpKFB7JBdaV/…, но, похоже, он не работает :(
Я изменил код, теперь смотрите @baitendbidz
@baitendbidz обновил мой ответ. Я думаю, что это решает проблему сейчас.