[JavaScript知识库]Vue-使用Textarea自适应高度

日常记录小技巧，Vue使用Textarea自适应高度。

<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;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}
</style>