前言
日常记录小技巧，使用Vue+Textarea实现在文本内容变化时自适应高度，还挺好用的。
一、示例代码
1.Vue2.X版本
（1）/src/views/Example/AutoTextarea/index_1.vue
<template>
<div style="padding: 50px;">
<el-button size="small" type="primary" plain @click="handleChangeTextareaClick($event)">
<el-icon :size="18">
<MagicStick />
</el-icon>
<small>点击事件</small>
</el-button>
<br /><br />
<textarea
class="textarea"
ref="textareaRef"
v-model="description"
:spellcheck="false"
>
</textarea>
</div>
</template>
<script>
export default {
data: () => ({
// 文本内容
description: 'HelloWorld ~!',
}),
watch: {
/**
* 深度监听文本内容
*/
description: {
handler(newVal, oldVal) {
if (newVal != oldVal) {
// 文本内容变化
this.handleChangeTextareaHeight()
}
},
deep: true
}
},
methods: {
/**
* 动态改变文本句柄方法
*/
handleChangeTextareaClick(evt) {
let len = Math.floor(Math.random() * (500 - 100 + 1) + 100)
this.description = this.getRandomChineseText(len)
},
/**
* 随机生成 200 - 800 个中文
*/
getRandomChineseText(len) {
let res = ''
for (let i = 0; i < len; i++) {
var randomUnicode = Math.floor(Math.random() * (40869 - 19968)) + 19968
res += String.fromCharCode(randomUnicode)
}
return res
},
/**
* 动态改变 Textarea 容器高度事件句柄方法
* Vue.nextTick(() => {}) 将回调函数延迟在下一次DOM更新数据过后进行调用
*/
async handleChangeTextareaHeight() {
this.$nextTick(async () => {
const textareaRef = await this.$refs.textareaRef
console.dir(textareaRef) // 打印元素的所有属性
console.log('textareaRef.offsetHeight = ' + textareaRef.offsetHeight)
console.log('textareaRef.scrollHeight = ' + textareaRef.scrollHeight)
textareaRef.style.height = 'auto' // 先重置元素的高度，此行代码可以试试注释看看打印效果 ~
textareaRef.style.height = textareaRef.scrollHeight + 'px' // 再设置元素的真实高度，此行代码可以试试注释看看打印效果 ~
console.log('')
})
}
}
}
</script>
<style>
.textarea {
padding: 10px;
background-color: #f5f7fa;
border: 1px solid #e4e7ed;
border-radius: 3px;
outline: none;
font-family: emoji;
}
</style>
2.Vue3.X版本
（1）/src/views/Example/AutoTextarea/index_2.vue
// watch 监听事件
watch(description, (newValue, oldValue) => {
handleChangeTextareaHeight()
})
// 改变 Textarea 容器高度事件句柄方法
const handleChangeTextareaHeight = () => {
// ...
}
二、运行效果
