Vue input textarea自動滾動到最底部

這是什么意思，就是類似於QQ聊天框一樣的效果，新來的一條一條的消息會不停地補充在textarea輸入框，然后展示最新來得數據，就需要textarea輸入框的滾動條默認下滑到最下面。

首先定一個textarea類型的input組件

首先使用 vue，其實一樣，但是我使用了 element 組件庫，其實不影響，和單純的 textarea 效果一樣。主要就是給 textarea 添加一個 id 或者是 class ，在后面新數據添加到輸入框之后獲取到元素，把他的滾動條滾動高度設置成滾動最大高度就可以。

<el-input 
   id="textarea_id"
   type="textarea"
   :rows="20"
   placeholder="請輸入內容"
   v-model="textarea" 
   readonly="">
</el-input>

每次新增內容都要調用

const textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;

這樣就可以了，需要在每次輸入框數據添加后都要添加這兩行代碼，這樣才能保證每次新數據來滾動條滾動到最后。

留坑

這樣寫之后，理論是可以的，但是我寫了之后不行！！！

為什么，找了好久原因。

填坑

哈哈哈，很簡單不用解釋，一看就恍然大悟 懂了...

this.$nextTick(() => {
   setTimeout(() => {
      const textarea = document.getElementById('scroll_text');
      textarea.scrollTop = textarea.scrollHeight;
   }, 13)
})

其實 $nextTick 就可以，在加個延時確保肯定沒問題！