textarea自动撑开缩放

1.gif

写项目过程中，可能会遇到需要内容自动撑开输入框，如例图所示，以vue项目为例，具体的实现过程就如下所示
1、首先放控件即textarea，css样式写好，然后给textarea绑定一个值，同时添加输入方法

2、我们都知道，textarea是可以自动撑开的，而且要想动态撑开输入框，即height = scrollHeight即可
所以，需要动态的检测textarea的输入内容,然后获取scrollHeight，赋值给height
watch: {
deliveryLocation(){
this.getHight ()
}
}
/**

• 动态获取textarea高度
  /
  getHight () {
  let textArea = document.getElementById('textArea')
  textArea.style.height = textArea.scrollHeight + 'px'
  },
  3、此时，基本可以看到可以自动撑开，但是会发现一个问题，就是如果内容减少，此时height已经固定，所以不会随着内容的减少高度减少，所以，通过绑定input方法，来动态更改textarea的高度，
  /*
• textarea输入方法
  **/
  inputInfo (e) {
  let textArea = document.getElementById('textArea')
  textArea.style.height = '20px'
  },
  到此时，已经实现了文章开始放的gif的效果