當(dāng)前位置:首頁 >  站長 >  編程技術(shù) >  正文

如何為 Element UI 里的 autosize textarea 設(shè)置高度

 2020-12-21 16:05  來源: 腳本之家   我來投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競價(jià),好“米”不錯(cuò)過

這篇文章主要介紹了如何為 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ī)遇!

相關(guān)文章

熱門排行

信息推薦