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