Ищете способ показать всплывающую подсказку только тогда, когда элемент усечен

Мне нужна помощь в поиске решения для отображения элемента всплывающей подсказки только тогда, когда элемент span усечен.

   <q-td v-for="(col,index) in props.cols" :key="col.name" :props="props">
        <span class="truncate">{{ col.value }}</span>
        <q-tooltip content-class="bg-primary" anchor="top middle" self="top middle" v-if="(index===0 || index===4) && col.value">{{ col.value }}</q-tooltip>
    </q-td>

Я пытался сделать это с помощью scrollWidth и clientWidth, но когда я пытаюсь получить доступ к элементу span с помощью document.getElementById(elementID), он возвращает undefined, я полагаю, потому что элемент span добавляется динамически. Класс усечения определяется следующим образом:

.truncate {
    display: block;
    width: 0;
    min-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

vue.js quasar
person whooptywhoop    schedule 10.12.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете создать метод для проверки длины текста и отображать всплывающую подсказку только тогда, когда длина текста превышает определенный порог (поэтому он был усечен). Например:

<q-td v-for="(col,index) in props.cols" :key="col.name">
    <span class="truncate">{{ col.value }}</span>
    <q-tooltip content-class="bg-primary" v-if="isTooltip(col.value)"> 
       {{ col.value }}
    </q-tooltip>
</q-td>

methods: { 
  isTooltip(col) {
    return col.length > 10
  }
}
person David Go    schedule 10.12.2020