把Element UI里的textarea input
设置为autosize之后,文本框的默认高度为33
,并不符合设计
默认样式
在浏览器中查检
元素,发现
高度是由textarea
的height
和min-height
来控制框内文字的位置是由padding
控制尝试
直接修改文本框的height
和padding
,看看能否起作用
在全局样式
里添加:
$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; } }
总结
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“如何为 Element UI 里的 autosize textarea 设置高度”评论...
更新动态
2024年05月13日
2024年05月13日
- 薛凯琪.2006-ElectricAngel(特别加歌版)【华纳】【WAV+CUE】
- 死尸死时四十四 死屍死時四十四
- 黄雀在后!
- 冤家变亲家 Mother of the Bride
- 刘梅《射雕宋韵雅乐原声带·壹》[320K/MP3][149.77MB]
- 刘梅《射雕宋韵雅乐原声带·壹》[FLAC/分轨][309.73MB]
- 群星《情迷雪域》[WAV分轨][1.1G]
- 破碎之地体力怎么用 行动力耐力合理使用攻略
- 原神风行迷踪谋策之局活动介绍 策略追猎挑战
- 决胜巅峰阿格斯技能怎么用 技能效果介绍
- 暗区突围正版官网入口分享 暗区突围官网下载链接
- 暗区突围PC端怎么下载 暗区突围PC端下载教程
- 暗区突围PC端官网入口 暗区突围国际服官网链接
- 《王国之泪》一周年!塞尔达公主声优晒手绘贺图庆祝
- Tango工作室关闭 玩家上Steam好评轰炸《完美音浪》