Cómo establecer la altura para la textura de autosización en el elemento ui

Después de configurar textarea input en la interfaz de usuario del elemento para que se ejecute, la altura predeterminada del cuadro de texto es 33 , que no se ajusta al diseño.

Estilo predeterminado

查检los elementos en el navegador y encuentre

La altura está controlada por height y min-height textarea texto en el cuadro. La posición del texto en el cuadro se controla con padding .

Modifique directamente height y padding del cuadro de texto para ver si funciona

Agregue全局样式:

 $ Inputheight: 38px; $ inputFontSize: 16px; .el-textArea {textAREA {padding: 8px; // Establecer altura de relleno: $ InPuthheight; // establecer el tamaño de la fuente de altura: $ inputFontSize; Línea de altura: 21px; }}

Después de revisarlo, descubrí que:

• El relleno ya es el nuevo tamaño
• La altura no es la altura que establecí

Curiosamente, height de este cuadro de texto está controlada por el estilo en línea.

Frente a este problema, hice dos intentos

Establezca height en !important , la altura ha cambiado, pero no puede expandirse automáticamente

-> rendirse

Escriba textarea usted mismo, para que el estilo se pueda cambiar a voluntad, pero para implementar文本框随内容扩展, debe escribir un montón de JS, que es un poco caro

-> no preferido uso

Durante el proceso de depuración, se descubrió que la altura inicial de autosize textarea en Element UI cambiará con padding .

Entonces, ajusté el tamaño del padding en el navegador hasta que la altura que admite es consistente con la altura requerida en figma

Luego cambie padding en el estilo global al valor correspondiente

 $ inputFontSize: 16px; .el-textArea {textARea {relleno: 7.5px 0 7.5px 8px; // Simplemente cambie el relleno aquí para afectar la altura del tamaño de la fuente TextAREA: $ inputFontSize; Línea de altura: 21px; }}

Este es el final de este artículo sobre cómo establecer la altura para la textura de autosización en la interfaz de usuario del elemento. Para obtener un elemento más relacionado, la interfaz de usuario de la interfaz de usuario de la interfaz de usuario, busque artículos anteriores de wulin.com o continúe navegando por los artículos relevantes a continuación. ¡Espero que todos apoyen a Wulin.com en el futuro!