Nach der Einstellung textarea input in der UI -Element -Benutzeroberfläche beträgt die Standardhöhe des Textfelds 33 , was dem Design nicht entspricht.
Standardstil
查检die Elemente im Browser und finden Sie
Die Höhe wird durch height und min-height textarea Textes im Feld gesteuert. Die Position des Textes im Feld wird durch padding gesteuert.
Ändern Sie direkt height und padding des Textfelds, um festzustellen, ob es funktioniert
Fügen Sie全局样式hinzu:
$ inputeight: 38px; $ inputfontSize: 16px; .el-textarea {textarea {padding: 8px; // Polsterhöhe festlegen: $ inputeight; // Höhen-Schriftgröße festlegen: $ InputFontsize; Zeilenhöhe: 21px; }}Nachdem ich es überarbeitet hatte, fand ich das:
Interessanterweise wird height dieses Textfelds vom Inline -Stil gesteuert.
Angesichts dieses Problems habe ich zwei Versuche unternommen
!wichtig Setzen Sie height auf !important , die Höhe hat sich geändert, kann sich aber nicht automatisch erweitern
-> aufgeben
Mytextarea Schreiben Sie textarea -Komponente selbst, damit der Stil nach Belieben geändert werden kann. Um文本框随内容扩展, müssen Sie eine Reihe von JS schreiben, was etwas teuer ist
-> Nicht bevorzugte Verwendung
Polster bestimmt die Größe Während des Debugging -Prozesses wurde festgestellt, dass sich die anfängliche Höhe autosize textarea im Element UI mit padding -Wert ändert.
Also habe ich die Größe der padding im Browser eingestellt, bis die Höhe, die sie unterstützt, mit der in figma
Ändern Sie dann padding im globalen Stil in den entsprechenden Wert
$ InputFontSize: 16px; // Ändern Sie einfach die Polsterung hier, um die Höhe der Textbereichs-Schriftgröße zu beeinflussen: $ InputFontsize; Zeilenhöhe: 21px; }}Zusammenfassen
Dies ist das Ende dieses Artikels, wie die Höhe für die automatisierende TextArea im Element UI festgelegt wird. Weitere zu verwandte Elemente UI Autosize TextArea -Inhalte suchen Sie bitte nach früheren Artikeln von Wulin.com oder durchsuchen Sie weiterhin die relevanten Artikel unten. Ich hoffe, jeder wird Wulin.com in Zukunft unterstützen!