textarea高度自適應

需求

vue實現textarea隨文本內容自動增高（原生可同理實現）

實現原理：textarea自己並不會隨着文本高度而增高。給textarea套上外容器，使用絕對定位，設置height:100%; width:100%; 這樣textarea就能夠隨着外容器的高度變化而變化。再利用塊級元素填充文字，塊元素能夠隨着文本高度自動增高。設置塊元素visibility: hidden;樣式與textarea一致便可。

代碼以下：

<!--html-->
<div class="textarea-wrapper">
    <!--pre 文本一般會保留空格和換行符。-->
    <pre class="content">{{value}}</pre>
    <textarea
        v-model="value"
        @input="changeInput($event)"
        placeholder="請在此處輸入文字..."
    ></textarea>
</div>
複製代碼

// js
data () {
    return {
        value: '', //輸入中的文字
    }
},
methods: {
    changeInput($event){
        this.value = $event.target.value;
    },
}
複製代碼

/* css */
.textarea-wrapper{
    position: relative;
    min-height : 20px;
    width 100%;
}
.content{
    display block;
    visibility: hidden;
    font-size: 14px;
    color: #333333;
    line-height: 1.3;
    word-wrap:break-word;
    font-family: SourceHanSansCN-Regular;
    padding 0;
}
.textarea-wrapper textarea{
    overflow:hidden;
    resize:none;
    width: 100%;
    height: 100%;
    font-family: SourceHanSansCN-Regular;
    border: 0;
    font-size: 14px;
    color: #333333;
    line-height: 1.3;
    padding 0px;
    position: absolute;
    left 0;
    top: 0;
}
複製代碼

如需轉載，煩請註明出處：juejin.im/post/5ba311…