ElementUI组件系列解读之<TextArea>

汲取前端精华的毛毛虫

2022-04-05 211 阅读1分钟

EL-textarea

源码部分：

图片70.png

其实它跟input的功能是大同小异，重点说下它宽度设置和根据字数自适应换行

图片71.png

图片72.png

这里有个css样式要注意，line-height:1 它表示按当前字体大小的百分之100计算，比如字体是20px 则行高也为20px

如何限制textarea行数?

逻辑：

图片73.png

图片74.png

图片75.png

看看这个calcTextareaHeight 做了什么

图片76.png

图片77.png 最终结果result={minHeight,height}

图片78.png 最后通过watch监听textarea值的变化从而重新计算高度并设置textarea的style

图片79.png