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

默認樣式

在瀏覽器中查檢元素，發(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è)置的高度

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

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

!important

把height設(shè)置為!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改成對應(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論