Element UIでオートサイズテキストエリアの高さを設定する方法

の高さを設定します。 textarea input をオートサイズにすると、テキストボックスのデフォルトの高さは 33 これはデザインにマッチしていない

デフォルトのスタイル

ブラウザの場合 Checking 要素を見つけ

高さ の高さです。 textarea の height と min-height を制御するために ボックス内のテキストの位置を制御します。 が制御されます。 padding を制御しようとします。

テキストボックスの height と padding をクリックして、動作確認をしてください。

で global style を追加します。

$inputHeight: 38px;
$inputFontSize: 16px;

.el-textarea {
  textarea {
    padding: 8px; // Set the padding of the text box
    height: $inputHeight; // set the height of the text box
    font-size: $inputFontSize;
    line-height: 21px;
  }
}

findに変更しました。

• paddingは新しく設定されたサイズになりました
• 高さが設定した高さでない

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

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

!重要

を配置します。 height に設定します。 !important 高さは変更されるが、自動的には展開されない

-> を離す

マイテキストエリア

自分で書く textarea コンポーネントを実装し、スタイルを自由に変更できるようにしています。 textbox expands with the content コンポーネントの場合、やはりjsを大量に書かなければならず、少しコストがかかる

-好ましくない

パディングが高さを決定する

デバッグ中に Element UI の中にある autosize textarea の初期高さを設定します。 padding の値です。

ということで、調整するのは padding と同じ高さになるまで、ブラウザで表示します。 figma で必要な高さは

次に padding を対応する値に変更します。

$inputFontSize: 16px;

.el-textarea {
  textarea {
    padding: 7.5px 0 7.5px 8px; // Just change the padding here to affect the height of the textarea
    font-size: $inputFontSize;
    line-height: 21px;
  }
}

概要

Element UIでオートサイズテキストエリアの高さを設定する方法については、この記事がすべてです。Element UI autosize textareaの高さについては、スクリプトハウスの過去記事を検索するか、引き続き以下の関連記事を閲覧してください。