Ich verwende die Vuetify TextField-Komponente in einer Tabelle mit vielen Spalten. Möglicherweise enthält die Komponente zu viel Inhalt, um angezeigt zu werden, und aus Sicht des Benutzererlebnisses würde die Überprüfung des Inhalts durch Scrollen innerhalb des Felds bei vielen Zellen zu viel Zeit in Anspruch nehmen.

Reines HTML-Beispiel

Vuetify-Beispiel

Meine erste Idee (wenn Sie eine bessere Idee haben, lassen Sie es mich bitte wissen) ist die Anzeige eines Tooltips, um den vollständigen Inhalt anzuzeigen. Dies wäre jedoch ärgerlich, wenn die Komponente den vollständigen Inhalt anzeigen kann. Daher möchte ich den Tooltip nur anzeigen, wenn der Inhalt ausgeblendet/abgeschnitten ist.

Gibt es also eine Möglichkeit herauszufinden, ob die Komponente den vollständigen Inhalt anzeigt oder ob es Inhalte gibt, die ausgeblendet/abgeschnitten sind? (Die Tabellenleistung ist wichtig, daher weiß ich nicht, ob es sich lohnt, sehr komplexe Berechnungen durchzuführen, wenn sich Werte ändern.)

Ich habe es versucht

(Spielplatz)

   
Schnitt ab: {{ isCuttingOff }}
    

Aber

• Beim Start ist die Variable inputWidth undefiniert
• Ich weiß nicht, wie ich die Variable inputValueWidth
berechnen soll.