技術標籤：csshtmljavascriptvue.js

這個方法的思路借鑑了https://alistapart.com/article/expanding-text-areas-made-elegant/

效果：

程式碼：（去掉了不關鍵的樣式部分) 注意：要加樣式的話在.input{}里加

<div class="text">
    <pre class="input"><span ref="preTxt"></span><br/></pre>
    <textarea class="input" ref="textarea" rows="1" @input="resizeArea"></textarea>
</div>
 

    .text {
      position: relative;
      width: 200px;
      min-height: 20px;
    }
    .input {
      width: 100%;
      word-wrap: break-word;
      white-space: pre-wrap;
      overflow: hidden;
    }
    textarea {
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      resize: none;
    }
    pre {
      visibility: hidden;
      display: block;
    }
 

methods里加

resizeArea() {
    this.$refs.preTxt.innerText = this.$refs.textarea.value;
}