前言
熟悉 ant-design-vue 的小伙伴应该知道，<a-textarea auto-size /> 可以渲染出一个自适应高度的 textarea（即：高度随着内容的变化而变化）；本文将介绍一下这样一个功能是如何实现的。
实现思路
如果我们能够实时的知道 textarea 元素中文本的高度，那么这个功能就很好实现了，只需要实时的将文本的高度赋值给 textarea 元素即可。
但是如何能够实时的知道 textarea 元素中文本的高度呢？这好像并不容易实现，那么我们可以换一种思路，如果有另外一个隐藏起来的 textarea（后文简称 hiddenTextarea）, 它的所有尺寸相关 css 属性都与原本的 textarea 保持一致且文本内容也一致，那么这个需求就有可能可以实现；但问题在于 textarea 文本超出高度后会显示滚动条，而不是像其他普通元素一样更新元素的高度（如果是这样，那本文也没必要存在了[手动狗头]）。
DOM 中有一个属性叫做 scrollHeight，我们可以获取 hiddenTextarea 的 scrollHeight 属性，将它的值赋值给原本 textarea 的 height 属性，那就实现了这个需求；接下来我们来看看具体如何实现。
实现
- 首先需要创建一个
hiddenTextarea，同时保证其尺寸相关的 css 属性都与原本的textarea保持一致，我们先来看看有哪些属性是与尺寸相关的：
const SIZING_STYLE = [
'letter-spacing',
'line-height',
'padding-top',
'padding-bottom',
'font-family',
'font-weight',
'font-size',
'font-variant',
'text-rendering',
'text-transform',
'width',
'text-indent',
'padding-left',
'padding-right',
'border-width',
'box-sizing',
'word-break',
];
只需要将两个 textarea 的这些属性保持一致，那么他们的尺寸就会保持一致。
- 通过
window.getComputedStyle方法获取原本textarea的属性值。
const style = window.getComputedStyle(textarea)
const sizingStyle = SIZING_STYLE.map(prop => `${prop}: ${style.getPropertyValue(prop)}`).join(';')
- 将属性值设置到
hiddenTextarea上：
hiddenTextarea.setAttribute('style', `${sizingStyle};`);
- 获取
hiddenTextarea的scrollHeight赋值给textarea的height
textarea.style.height = hiddenTextarea.scrollHeight
如此，就实现了一个自适应高度的 textarea。
结语
本文主要介绍了如何实现 textarea 自适应高度的原理。
