這篇文章主要介紹了如何為 Element?? UI 里的置高 autosize textarea 設置高度,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細，對大家的置高學(xué)習或工作具有一定的參(can)考借鑒價(jià)值，需要的置高朋友可以參考下

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

默認樣式

在瀏覽器中查檢元素，置高發(fā)現

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

在全局樣式里添加:

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

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

padding 已經(jīng)是新設置的大小了

height 并不是我設置的高度

有意思的是，這個(gè)文本框的置高height是由行內┐(′?｀)┌樣式所控制

面對ヽ(′ー｀)ノ這個(gè)問(wèn)題，我做了兩個(gè)嘗試

!important

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

-> 放棄

MyTextarea

自己寫(xiě)??textarea組件，置高這樣一來(lái)樣式是置高可以隨意改了，但要實(shí)現文本框隨內容擴展的(???)置高話(huà)還得寫(xiě)一堆 js ，成本有點(diǎn)高

-> 不優(yōu)先使用

padding 決定了 height

在調試過(guò)程中發(fā)現，置高Element UI里的置高(?????)autosize textarea的初始高度是會(huì )隨著(zhù)padding的值變化

所以，我就在瀏覽器里調整padd(′▽?zhuān)?)ing的大小 ，直到它撐起來(lái)的高度和figma里要求的高度一致

$inputFontSize: 16px;

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

總結

到此這篇關(guān)于如何為 Element UI 里的 autosize?? textarea 設置高度的文章就介紹到這了,更多相關(guān)Element UI autosize textarea 高度內??容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章，希望大家以后(hou)多多支持腳本之家！

來(lái)源：腳本之家

鏈接：https://www.jb51.net/web/727926.html