So legen Sie die Höhe des automatisch angepassten Textbereichs in Element UI fest

Nachdem textarea input in Element UI auf automatische Größenanpassung eingestellt wurde, beträgt die Standardhöhe des Textfelds 33 , was nicht dem Design entspricht

Standardstil

Als ich das Element im Browser查檢, fand ich

Die Höhe wird durch height und min-height textarea gesteuert . Die Position des Textes im Feld wird durch padding gesteuert.

Ändern Sie direkt height und padding des Textfelds, um zu sehen, ob es funktioniert

Zu全局樣式hinzufügen:

$Eingabehöhe: 38px;
$inputFontSize: 16px;

.el-textarea {
  Textbereich {
    padding: 8px; // Legen Sie die Polsterung des Textfelds fest
    height: $inputHeight; // Höhe des Textfelds festlegen
    Schriftgröße: $inputFontSize;
    Zeilenhöhe: 21px;
  }
}

Nach der Änderung stellte ich fest:

• Die Polsterung hat bereits die neue Grösse.
• Die Höhe ist nicht die Höhe, die ich eingestellt habe

Interessanterweise wird height dieses Textfelds durch den Inline-Stil gesteuert

Angesichts dieses Problems machte ich zwei Versuche

!wichtig

Wenn Sie height auf !important setzen, wird die Höhe geändert, sie wird jedoch nicht automatisch erweitert.

-> Aufgeben

MeinTextbereich

Schreiben Sie Ihre eigene textarea , sodass der Stil nach Belieben geändert werden kann. Wenn Sie jedoch möchten, dass文本框隨內容擴展müssen Sie viel JS schreiben, was etwas kostspielig ist.

-> Nicht bevorzugt

Polsterung bestimmt die Höhe

Beim Debuggen habe ich festgestellt, dass sich die anfängliche Höhe autosize textarea in Element UI mit dem Wert von padding ändert.

Also habe ich die Größe der padding im Browser angepasst, bis die unterstützte Höhe der in figma

Ändern Sie dann padding im globalen Stil auf den entsprechenden Wert

$inputFontSize: 16px;

.el-textarea {
  Textbereich {
    Polsterung: 7,5px 0 7,5px 8px; // Allein die Änderung der Polsterung hier wirkt sich auf die Höhe des Textbereichs aus. Schriftgröße: $inputFontSize;
    Zeilenhöhe: 21px;
  }
}

Zusammenfassen

Dies ist das Ende dieses Artikels zum Einstellen der Höhe für den automatisch angepassten Textbereich in Element UI. Weitere Informationen zur automatisch angepassten Textbereichshöhe von Element UI finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!