婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

主頁 > 知識庫 > 如何為 Element UI 里的 autosize textarea 設置高度

如何為 Element UI 里的 autosize textarea 設置高度

熱門標簽:貴陽ai外呼系統 長春極信防封電銷卡公司 強訊外呼系統 愛巢地圖標注 重慶人工智能電銷機器人報價 電銷外呼線路改不外呼線路 智能電銷機器人廣告語 crm外呼系統好不好 電話機器人批發

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

默認樣式

在瀏覽器中查檢元素,發現

高度是由textareaheightmin-height來控制框內文字的位置是由padding控制嘗試

直接修改文本框的heightpadding,看看能否起作用

全局樣式里添加:

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

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

改過之后發現:

  • padding 已經是新設置的大小了
  • height 并不是我設置的高度

有意思的是,這個文本框的height是由行內樣式所控制

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

!important

height設置為!important,高度是變了,但它不能自動擴展了

-> 放棄

MyTextarea

自己寫textarea組件,這樣一來樣式是可以隨意改了,但要實現文本框隨內容擴展的話還得寫一堆 js ,成本有點高

-> 不優先使用

padding 決定了 height

在調試過程中發現,Element UI里的autosize textarea的初始高度是會隨著padding的值變化

所以,我就在瀏覽器里調整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 高度內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

標簽:清遠 上海 內蒙古 保定 陜西 吳忠 山南 廣安

巨人網絡通訊聲明:本文標題《如何為 Element UI 里的 autosize textarea 設置高度》,本文關鍵詞  如,何為,Element,里的,autosize,;如發現本文內容存在版權問題,煩請提供相關信息告之我們,我們將及時溝通與處理。本站內容系統采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《如何為 Element UI 里的 autosize textarea 設置高度》相關的同類信息!
  • 本頁收集關于如何為 Element UI 里的 autosize textarea 設置高度的相關信息資訊供網民參考!
  • 推薦文章
    主站蜘蛛池模板: 连城县| 江都市| 屯昌县| 合水县| 山西省| 隆尧县| 全椒县| 祥云县| 玛沁县| 偃师市| 襄樊市| 铜陵市| 博客| 德安县| 昌都县| 阿鲁科尔沁旗| 滨州市| 安达市| 田阳县| 巫溪县| 西贡区| 收藏| 龙州县| 凤凰县| 九台市| 五原县| 洛宁县| 凤翔县| 柞水县| 洛南县| 永新县| 卓尼县| 松阳县| 琼海市| 温州市| 普兰店市| 嘉定区| 寿宁县| 松溪县| 德安县| 六盘水市|