Element UI で自動サイズ調整テキストエリアの高さを設定する方法

Element UIのtextarea input自動サイズに設定すると、テキストボックスのデフォルトの高さは33なり、デザインを満たしません。

デフォルトスタイル

ブラウザで要素查檢ところ、

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

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

全局樣式に追加:

$入力高さ: 38px;
入力フォントサイズ: 16px;

.el-テキストエリア{
  テキストエリア {
    padding: 8px; // テキストボックスのパディングを設定します
    height: $inputHeight; // テキストボックスの高さを設定します
    フォントサイズ: $inputFontSize;
    行の高さ: 21px;
  }
}

変更後、次のことがわかりました:

• パディングはすでに新しいサイズです。
• 高さが私が設定した高さと異なります

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

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

！重要

heightを!importantに設定すると高さは変わりますが、自動的には拡大されません。

-> 諦める

マイテキストエリア

独自のtextareaコンポーネントを記述すると、スタイルを自由に変更できますが、文本框隨內容擴展多くの js を記述する必要があり、コストが少し高くなります。

-> 好ましくない

パディングによって高さが決まる

デバッグ中に、 Element UIのautosize textareaの初期の高さがpaddingの値によって変わることがわかりました。

そこで、ブラウザでサポートされている高さがfigmaで必要な高さと一致するまで、ブラウザのpaddingのサイズを調整しました。

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

入力フォントサイズ: 16px;

.el-テキストエリア{
  テキストエリア {
    padding: 7.5px 0 7.5px 8px; // ここで padding を変更するだけで、テキスト領域の高さに影響します font-size: $inputFontSize;
    行の高さ: 21px;
  }
}

要約する

Element UI の自動サイズ調整テキストエリアの高さを設定する方法については、これで終わりです。Element UI の自動サイズ調整テキストエリアの高さの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。