如何為Element UI 裡的autosize textarea 設置高度

把Element UI裡的textarea input設置為autosize之後，文本框的默認高度為33 ，並不符合設計

默認樣式

在瀏覽器中查检元素，發現

高度是由textarea的height和min-height來控制框內文字的位置是由padding控制嘗試

直接修改文本框的height和padding ，看看能否起作用

在全局样式裡添加:

 $inputHeight: 38px;$inputFontSize: 16px;.el-textarea { textarea { padding: 8px; // 設置文本框的padding height: $inputHeight; // 設置文本框的height font-size: $inputFontSize; line-height: 21px; }}

改過之後發現：

• padding 已經是新設置的大小了
• height 並不是我設置的高度

有意思的是，這個文本框的height是由行內樣式所控制

面對這個問題，我做了兩個嘗試

把height設置為!important ，高度是變了，但它不能自動擴展了

-> 放棄

自己寫textarea組件，這樣一來樣式是可以隨意改了，但要實現文本框随内容扩展的話還得寫一堆js ，成本有點高

-> 不優先使用

在調試過程中發現， Element UI裡的autosize textarea的初始高度是會隨著padding的值變化

所以，我就在瀏覽器裡調整padding的大小，直到它撐起來的高度和figma裡要求的高度一致

然後把全局樣式裡的padding改成對應的值

$inputFontSize: 16px;.el-textarea { textarea { padding: 7.5px 0 7.5px 8px; // 只要改變這裡的padding 就可以影響到textarea 的高度font-size: $inputFontSize; line-height: 21px; }}

到此這篇關於如何為Element UI 裡的autosize textarea 設置高度的文章就介紹到這了,更多相關Element UI autosize textarea 高度內容請搜索武林網以前的文章或繼續瀏覽下面的相關文章，希望大家以後多多支持武林網！