实现一个跟随内容增多高度自动调整的textarea

以vue中为例

<template>  
  <div>  
    <textarea  
      v-model="inputValue"  
      @input="resizeTextarea"  
      :style="{ height: textareaHeight + 'px', overflowY: 'hidden' }"  
      placeholder="Type something..."  
    ></textarea>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      inputValue: '',  
      textareaHeight: 30, // 初始高度  
    };  
  },  
  methods: {  
    resizeTextarea() {  
      this.$nextTick(() => {  
        const textarea = this.$el.querySelector('textarea');  
        textarea.style.height = 'auto'; // 重置高度以获取scrollHeight  
        textarea.style.height = `${textarea.scrollHeight}px`; // 设置新的高度  
  
        // 可选：设置最小高度  
        if (textarea.scrollHeight < this.textareaHeight) {  
          textarea.style.height = `${this.textareaHeight}px`;  
        }  
      });  
    },  
  },  
};  
</script>  
  
<style scoped>  
textarea {  
  resize: none; /* 禁止用户调整大小 */  
  padding: 5px; /* 适当的内边距 */  
  width: 100%; /* 宽度根据需要调整 */  
  box-sizing: border-box; /* 确保内边距不会增加额外宽度 */  
}  
</style>

重点是textarea.style.height ='auto'; 需要在内容更改的时候，将它设置为auto，然后再去获取textarea的滚动高度！

而且这个滚动高度与textarea的样式设置息息相关！特别是Line-height，一定要注意！

const lineHeight = parseInt(window.getComputedStyle(textareaEl).lineHeight, 10);

动态获取Lineheight的方法。