Depois de definir textarea input na interface do usuário do elemento para automaticamente, a altura padrão da caixa de texto é 33 , que não está em conformidade com o design.
Estilo padrão
查检os elementos no navegador e encontre
A altura é controlada pela height e min-height textarea texto na caixa. A posição do texto na caixa é controlada por padding .
Modifique diretamente height e padding da caixa de texto para ver se funciona
Adicione全局样式:
$ inputhEight: 38px; $ inputFontSize: 16px; .el-textarea {textarea {preenchimento: 8px; // Definir altura do preenchimento: $ no -puthEight; // Defina a altura do tamanho da fonte: $ inputFontSize; altura da linha: 21px; }}Depois de revisá -lo, descobri que:
Curiosamente, height desta caixa de texto é controlada pelo estilo embutido.
Diante desse problema, fiz duas tentativas
!importante Defina height para !important , a altura mudou, mas não pode se expandir automaticamente
-> Desista
Mytextarea Escreva você mesmo textarea , para que o estilo possa ser alterado à vontade, mas para implementar文本框随内容扩展, você deve escrever um monte de JS, o que é um pouco caro
-> Uso não preferido
O preenchimento determina a altura Durante o processo de depuração, verificou -se que a altura inicial autosize textarea na Element UI mudará com padding .
Então, ajustei o tamanho do padding no navegador até que a altura que ele suporta seja consistente com a altura necessária figma
Em seguida, mude padding no estilo global para o valor correspondente
$ inputFontSize: 16px; .el-textarea {textAtea {preenchimento: 7.5px 0 7.5px 8px; // Basta alterar o preenchimento aqui para afetar a altura do tamanho da fonte da textarea: $ inputFontSize; altura da linha: 21px; }} ResumirEste é o fim deste artigo sobre como definir a altura para a textarea automática na interface do usuário do elemento. Para obter um conteúdo mais relacionado à UI do Element Related AutoSize, procure artigos anteriores do Wulin.com ou continue a procurar os artigos relevantes abaixo. Espero que todos apoiem o Wulin.com no futuro!