一、背景介绍
在一个老项目中,需要使用到texarea
组件,项目久远且庞大,默认的texarea
的样式出不来,在一顿查找之后,并没有找到样式出不来的原因,能力和时间都有限,决定单独给texarea
写样式并实现高度自适应(即不出现滚动条,高度随内容变化)
二、样式设置
样式就不多说了,直接上代码(借鉴的element-ui
的textarea
样式)
三、高度自适应的思路
要实现自适应高度的几个步骤
- 监听
textarea
内容变化 - 计算内容变化后
textarea
的高度 - 给
textarea
设置新的高度
四、具体实现
既然有了思路,那就逐个实现吧
-
监听内容变化
2. 计算内容变化后textarea
的高度
textarea
的box-sizing 设置为border-box,所以高度应该为内容的高度+上下border的高度
3. 给textarea设置新的高度
4. 运行代码测试
符合预期效果
四、总结
记录一下自己开发过程中遇到的问题,方便自己以后查看,也希望遇到同样问题的小伙伴可以做个参考,有不足的地方,还请不吝赐教,感谢
在我们的开发过程中,总会遇到这样那样的问题,遇到问题不可怕,只要直面它,找到解决办法,相信你会学到更多的知识
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!