Element UIでTextareaを自動化するために高さを設定する方法

Element UIにtextarea input自動化するように設定した後、テキストボックスのデフォルトの高さは33であり、設計に適合しません。

デフォルトスタイル

ブラウザの要素查检て見つけます

高さは、ボックス内のテキストtextarea heightとmin-heightによって制御されます。ボックス内のテキストの位置は、 paddingによって制御されます。

テキストボックスのheightとpaddingを直接変更して、機能するかどうかを確認します

全局样式を追加します：

 $ inputheight：38px; $ inputfontsize：16px; .el-textarea {textarea {padding：8px; //パディングの高さを設定：$ inputheight; //高さのフォントサイズを設定：$ inputFontsize;ラインハイト：21px; }}

それを修正した後、私はそれを見つけました：

• パディングはすでに新しいサイズです
• 高さは私が設定した高さではありません

興味深いことに、このテキストボックスのheightインラインスタイルによって制御されます。

この問題に直面して、私は2回の試みをしました

heightを!important

- >あきらめます

textareaコンポーネントを自分で書き込み、スタイルを自由に変更できるようにしますが、文本框随内容扩展、JSの束を書く必要があります。

- >使用が好ましい

デバッグプロセス中に、 Element UIのautosize textareaの初期高さがpadding値とともに変化することがわかりました。

そのため、ブラウザのpaddingのサイズを、サポートする高さがfigma

次に、グローバルスタイルのpaddingを対応する値に変更します

$ inputfontsize：16px; .el-textarea {textarea {padding：7.5px 0 7.5px 8px; //ここでパディングを変更するだけで、Textarea font-size：$ inputFontsizeの高さに影響します。ラインハイト：21px; }}

これは、要素UIの自動化されたテキストレアの高さをどのように設定するかについてのこの記事の終わりです。より関連する要素UIについては、Textareaコンテンツを自動化するには、wulin.comから以前の記事を検索するか、以下の関連記事を閲覧し続けてください。将来、誰もがwulin.comをサポートすることを願っています！