需求
vue实现textarea随文本内容自动增高(原生可同理实现)
实现原理:textarea本身并不会随着文本高度而增高。给textarea套上外容器,使用绝对定位,设置
height:100%; width:100%;
这样textarea就可以随着外容器的高度变化而变化。再利用块级元素填充文字,块元素可以随着文本高度自动增高。设置块元素visibility: hidden;
样式与textarea一致即可。
代码如下:
<!--html-->
<div class="v-textarea">
<!--pre 文本通常会保留空格和换行符。-->
<pre class="content">{{ value }}</pre>
<textarea
v-model="value"
class="content"
placeholder="请输入"
/>
</div>
// js
data () {
return {
value: '', //输入中的文字
}
},
/* css */
.v-textarea {
position: relative;
width: 100%;
> textarea{
resize:none;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: transparent;
}
> pre {
visibility: hidden;
}
.content{
min-height: 30px;
border: 0;
width: 100%;
font-family:PingFangSC-Regular,PingFang SC;
display: block;
font-size: 14px;
color: #333333;
line-height: 1.3;
padding: 5px 0;
overflow:hidden;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-word;
}
}
如需转载,烦请注明出处:juejin.cn/post/684490…