Como definir a altura para automaticamente textarea na interface do usuário do elemento

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:

• O preenchimento já é o novo tamanho
• A altura não é a altura que eu defino

Curiosamente, height desta caixa de texto é controlada pelo estilo embutido.

Diante desse problema, fiz duas tentativas

Defina height para !important , a altura mudou, mas não pode se expandir automaticamente

-> Desista

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

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; }}

Este é 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!