textarea高度自适应-优快云博客

本文介绍了一种在Vue中使Textarea随着输入文本自动增高的方法。通过使用预格式化（pre）元素配合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;
}
复制代码