vue textarea 自适应高度

最新推荐文章于 2025-04-18 10:34:24 发布

weixin_48597380

最新推荐文章于 2025-04-18 10:34:24 发布

阅读量356

点赞数

文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_48597380/article/details/126410830

版权

<-- v-model 或者  @input  --> 
<textarea ref="textareaRef" :key="forceUpdateKey" class="textarea" disabled v-model="description" ></textarea>
 
data: () => ({
	// 强制刷新组件的状态
	forceUpdateKey: 0,
 
	// 文本内容
	description: ""
}),
 
watch: {
	"description" (newVal, oldVal) {
	  if (newVal === oldVal) {
	    return;
	  }
	  this.description = newVal;
	  this.forceUpdateKey += 1;
	  this.changeTextareaHeight();
	}
},
methods: {
	changeTextareaHeight () {
	  let _this = this;
	  this.$nextTick(() => {
	    let textarea = _this.$refs.textareaRef;
	    var scrollHeight = textarea.scrollHeight; // 控件所有的高度，包含滚动的那部分(不可见也会有高度)
	    var height = textarea.offsetHeight; // 屏幕上显示的高度
	    if (height <= scrollHeight) {
	      textarea.style.height = 'auto'; // 恢复默认值，这个作用就是根据内容自适应textarea高度
	      textarea.style.height = textarea.scrollHeight + 'px'; // 拿到最新的高度改变textarea的高度
	    }
	  })
	}
}
 
<style>
	.textarea {
		display: block;
		padding: 20px;
		flex: 1;
		font-size: 14px;
		cursor: text;
		color: #000;
		background-color: #f5f7fa;
		border: 1px solid #e4e7ed;
		outline: none;
		overflow-y: auto;
		appearance: none;
		text-align: inherit;
	}
</style>