textarea高度自适应

textarea高度自适应得以实现。代码如下：

HTML:

<div id="message-textarea">
  <pre><span></span><br></pre>
  <textarea></textarea>
</div>

CSS:

#message-textarea{

  max-height: 50px;
  outline: 1px solid #000;
  position: relative;
  line-height: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

#message-textarea pre{
  padding: 5px;
  margin: 0;
  font: 400 14px/20px helvetica, arial, sans-serif;
  box-sizing: border-box;
  width: 100%;
  white-space: pre-wrap;
  word-wrap: break-word;
  visibility: hidden;
}

#message-textarea textarea{
  width: 100%;
  height: 100%;
  display: block;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  font: 400 14px/20px helvetica, arial, sans-serif;
  padding: 5px;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-wrap: break-word;
  resize: none;
}

script：

 methods:{
	 makeExpandingArea(container) {
		  var textarea = container.getElementsByTagName('textarea')[0] ;
		  var span = container.getElementsByTagName('span')[0] ;
		
		  textarea.addEventListener('input', function() {
		    span.textContent = textarea.value;
		  }, false);
		
		  span.textContent = textarea.value;
	}
}
//调用
mounted(){
	var areas = document.getElementById('message-textarea') ;
	this.makeExpandingArea(areas);
}

注意： 这里的textarea需要禁止掉可手动拉伸的特性，也就是右下角出现的小三角形。解决这个问题很简单，只要在css里设置“resize:none;” 即可。