這篇文章主要介紹了如何為 Element UI 里的 autosize textarea 設置高度,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
把Element UI里的textarea input設置為autosize之后，文本框的默認高度為33，并不符合設計
默認樣式
在瀏覽器中查檢元素，發(fā)現(xiàn)
高度是由textarea的height和min-height來控制框內(nèi)文字的位置是由padding控制嘗試
直接修改文本框的height和padding，看看能否起作用
在全局樣式里添加:
$inputHeight: 38px;
$inputFontSize: 16px;
.el-textarea {
textarea {
padding: 8px; // 設置文本框的 padding
height: $inputHeight; // 設置文本框的 height
font-size: $inputFontSize;
line-height: 21px;
}
}
改過之后發(fā)現(xiàn)：
padding 已經(jīng)是新設置的大小了
height 并不是我設置的高度
有意思的是，這個文本框的height是由行內(nèi)樣式所控制
面對這個問題，我做了兩個嘗試
!important
把height設置為!important，高度是變了，但它不能自動擴展了
-> 放棄
MyTextarea
自己寫textarea組件，這樣一來樣式是可以隨意改了，但要實現(xiàn)文本框隨內(nèi)容擴展的話還得寫一堆 js ，成本有點高
-> 不優(yōu)先使用
padding 決定了 height
在調(diào)試過程中發(fā)現(xiàn)，Element UI里的autosize textarea的初始高度是會隨著padding的值變化
所以，我就在瀏覽器里調(diào)整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 高度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
來源：腳本之家
鏈接：https://www.jb51.net/web/727926.html
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
