Vue项目文本域输入内容超过N行，输入框向上自适应高度的实现
最近在做项目的时候，有个评论功能。输入框默认只能输入2行，超过2行后滚动显示。后来做产品优化的时候应该默认使用2行。超过2行后，可以将输入框调整到6行高度，滚动显示。（产品是微信聊天的输入框供参考，需要参考）2行带滚动条的效果：于是我打开微信看了看，在网上搜索了相关资料后，我做了一个demo，大致可以实现，这里是说明大致思路：主要是利用keyup事件监听输入内容后输入框的高度，通过document.defaultView.getComputedStyle(e.target,null)['height'].getComputedStyle()方法返回一个CSSStyleDeclaration对象，它包含当前元素的所有计算样式。不懂的同学可以百度下载。另外，输入框可滚动内容的高度是通过scrollHeight()获取的。如果通过判断计算出的输入框高度小于可滚动高度，则说明输入内容发生了换行。此时输入框上方的评论列表的高度减去一个输入框的行高，输入框的高度设置为它的可滚动高度。先上传这个版本的代码html代码：这是一个评论列表评论
css代码：.comment-container{position:relative;宽度：600px；高度：500px；保证金：0自动；边框：1px实心#ccc；margin-top:80px;}.comment-list{height:362px;溢出：滚动；背景：#ddd；text-align:left;}.publish-comments{position:absolute;底部：0；左：0；填充：024px；宽度：552px；border-top:1pxsolid#eee;}.form-control{宽度:100%;填充右：6px；最小高度：38px；-webkit-溢出滚动：触摸；调整大小：无；大纲：0无；顶部边距：12px；字体大小：14px；字体系列：微软雅黑；颜色：RGBA（13,20,30,1）；行高：19px；不透明度：.6;}.publish-btn{宽度：76px;高度：32px；行高：32px；游标：指针；浮动：对；顶部边距：4px；底部边距：6px；背景：线性渐变（180deg，rgba（44,104,255,1）0％，rgba（75,144,255,1）100％）;边界半径：4px；颜色：#fff；text-align:center;}jscode:selfAdaption(e){letcommentListEl=document.getElementById('comment-list')//评论列表元素console.log('计算高度/可滚动高度',parseInt(document.defaultView.getComputedStyle(e.target,null)['height']),e.target.scrollHeight)if(parseInt(document.defaultView.getComputedStyle(e.target,null)['height'])
parseInt(document.defaultView.getComputedStyle(e.target,null)['height'])){commentListEl.style.height=parseInt(document.defaultView.getComputedStyle(topEl,null)['height'])+19+'px'}}其实这里的思路很简单，得到的计算出来的高度总是一样的，所以就卡在这里了，，，然后突然想到输入框的可滚动高度总是可以得到的，然后评论列表和输入框的高度和是固定的，所以看起来比较简单。取总高度减去输入框的高度，剩下的就是评论列表的高度。这样就变得很简单了，不需要根据判断加/减行高高，最终函数的代码如下：selfAdaption(e){varcommentListEl=document.getElementById('comment-list')//评论列表元素if(e.target.scrollHeight>114){returnfalse//114为输入框高度为6行，超过6行则使用滚动条}commentListEl.style.height=400-e.target.scrollHeight+'px'//400为评论列表+输入框的高度e.target.style.height='auto'e.target.scrollTop=0//防抖e.target.style.height=e.target.scrollHeight+'px'//设置输入框的高度为其可滚动的高度}最终效果图：本以为函数比较难，做完之后，就这些几行代码就搞定了，把过程记录下来，留着以后忘记了。.
