vue项目中textarea无法根据输入的内容自适应高度 爬坑

需求

要求做一个可以输入的卡片，不管输入多少文字，输入的内容上下左右都居中。

刚开始掘金上找了一下 文章说样式上设置一个最小高度例如20px，然后可以通过监听textarea的input输入事件 把scrollHeight赋值给textarea的高度 并且要在赋值之前 先赋最小默认值 代码如下

var textarea = document.querySelector('.component-gift-designer-wrapper-outer-textarea'); textarea.addEventListener('input', (e) => {

    textarea.style.height = '20px';

    textarea.style.height = e.target.scrollHeight + 'px';

});

当时我在mounted里写了这个代码 发现还是不行 有的时候 输入监听不到 输入的内容 会出现被遮挡掉的情况 于是我写了如下代码

<textarea class="component-gift-designer-wrapper-outer-textarea" placeholder="请输入卡片内容" @input="changeTextareaContent"></textarea>

直接通过input事件 给textarea高度赋值 并且在样式里也不用写最小高度 直接写一个height: auto;和如下代码 这样实现了页面中可以输入内容的时候 自动撑开上下左右居中 但是 在删减的时候 内容并不会改变

    changeTextareaContent(e) {
      this.message = e.value
      const textareaContent = document.querySelector(
        '.component-gift-designer-wrapper-outer-textarea',
      )
      textareaContent.style.height = e.scrollHeight + 'px'
    },

为了解决删减的时候,textarea框并没有改变的问题 所以我用了方案3  

直接在textarea输入内容时，给输入的样式高度先设置auto 后设置scrollHeight给输入的样式

直接完美解决了输入内容和删减内容的时候 textarea文本框自适应高度

    // 修改多行输入框textarea中的内容
    changeTextareaContent(e) {
      this.message = e.target.value
        e.target.style.height = 'auto'
        e.target.style.height = `${e.target.scrollHeight}px`
    },

希望以上分享，可以帮到你~

如果有什么其他要探讨的 我们评论区见