Comment définir la hauteur pour la textare de automatique dans l'interface utilisateur des éléments

Après avoir réglé textarea input dans l'interface utilisateur de l'élément sur AutoSize, la hauteur par défaut de la zone de texte est 33 , ce qui n'est pas conforme à la conception.

Style par défaut

查检les éléments du navigateur et trouvez

La hauteur est contrôlée par height et min-height textarea texte dans la boîte. La position du texte dans la boîte est contrôlée par padding .

Modifiez directement height et padding de la zone de texte pour voir si cela fonctionne

Ajouter全局样式:

 $ inputheight: 38px; $ inputFontize: 16px; .el-textArea {textArea {padding: 8px; // Définir la hauteur du rembourrage: $ inputheight; // Définir la taille de la police de hauteur: $ inputFontsize; hauteur de ligne: 21px; }}

Après l'avoir révisé, j'ai trouvé que:

• Le rembourrage est déjà la nouvelle taille
• La hauteur n'est pas la hauteur que je mette

Fait intéressant, height de cette zone de texte est contrôlée par le style en ligne.

Face à ce problème, j'ai fait deux tentatives

Régler la height à !important

-> abandonner

Écrivez textarea vous-même, afin que le style puisse être modifié à volonté, mais pour implémenter文本框随内容扩展, vous devez écrire un tas de JS, qui est un peu cher

-> Utilisation non préférée

Au cours du processus de débogage, il a été constaté que la hauteur initiale de autosize textarea dans Element UI changera avec padding .

Ainsi, j'ai ajusté la taille du padding dans le navigateur jusqu'à ce que la hauteur qu'il supporte est cohérente avec la hauteur requise dans figma

Puis modifiez padding dans le style global en valeur correspondante

 $ inputFontize: 16px; .el-textArea {textArea {padding: 7.5px 0 7.5px 8px; // Changez simplement le rembourrage ici pour affecter la hauteur de la taille de la police de TextArea: $ inputFontsize; hauteur de ligne: 21px; }}

C'est la fin de cet article sur la façon de définir la hauteur de la TextArea AutoSize dans l'interface utilisateur de l'élément. Pour plus de contenu de TextArea, ui plus connexe, veuillez rechercher des articles précédents sur wulin.com ou continuer à parcourir les articles pertinents ci-dessous. J'espère que tout le monde soutiendra Wulin.com à l'avenir!