Vue中可根據內容自適應改變高度的textarea文本框

如圖所示，當 textarea里的內容超過一行后，會出現滾動條並隱藏前一行的內容，特別是在移動端使用到textarea多行文本輸入的話，這樣顯示其實是很不友好的。所以要做一個可根據內容改變高度的textarea的組件。

 

踩坑嘗試

利用rows屬性來改變高度：

 

W3C HTML <textarea> 標簽

踩坑時的思路：

• 給textarea加上rows屬性，並雙向綁定在data的rows上。如：<textarea ref="textarea" :rows="rows" v-model="value" class="textarea"></textarea>
• 獲取初始頁面時候textarea的高度，這就是一行的高度oneHeight；
• 通過vue的watch數據監聽，當textarea的內容發生變化時觸發，獲取textarea的scrollHeight，再除以oneHeight求整數然后加一就是rows的數量。

踩坑感想：
這樣做是可以實現當內容變多，行數跟着變多的情況的，但是，當內容變少，scrollHeight是不會減少的！所以rows也不會變，一旦被撐大，就再也縮不回去。。。。顯然，這不是我想要的效果。

正確姿勢

猛然回想起ElementUI上就有可根據內容調整高度的組件ElementUI input！
然后就去扒源碼看看是怎么實現的，結果都已經封裝好了，太棒了，直接下載來引用就行了！

餓了么組件的源碼github地址：
https://github.com/ElemeFE/element/blob/dev/packages/input/src/calcTextareaHeight.js

下面是引用了ElementUI的input組件的calcTextareaHeight方法的MyTextarea.vue：

<template>
    <div class="my-textarea">
      <textarea ref="textarea" :style="{'height': height}" v-model="value" class="textarea" ></textarea>
    </div>
</template>

<script>
  import calcTextareaHeight from '@/assets/calcTextareaHeight';

  export default {
    name: 'my-textarea',
    data() {
      return {
        // textarea內容
        value: '',
        // 動態高度
        height: '30px'
      }
    },
    watch: {
      value() {
        this.getHeight();
      }
    },
    methods: {
      getHeight() {
        this.height = calcTextareaHeight(this.$refs.textarea, 1, null).height;
      }
    }
  }
</script>

<style scoped>
  .my-textarea .textarea {
    display: inline-block;
    width: 400px;
    /*height: 30px;*/
    line-height: 30px;
    font-size: 30px;
    resize: none;
  }
</style>

摘至：https://www.jianshu.com/p/23c3a6d5dfdf