Element-ui 之 Textarea 自适应文本高度功能的源码分析

本文将深入分析 Element UI 中 Textarea 自适应文本高度功能的实现原理。

一. 自适应高度功能的介绍

1.1 自适应高度功能描述

自适应高度功能是指文本域跟随字数的增加或减少，从而动态的调整文本域的高度。

1.2 自适应高度功能相关属性

在 element-ui 的 Input 组件中，设置了 type="textarea"，再设置 autosize 属性，可以开启自适应文本高度功能。

序号	参数	说明	类型	可选值	默认值
1	autosize	自适应内容高度，只对 type=textarea 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }	boolean / object	–	false

二. 自适应高度功能的具体实现

2.1 自适应高度功能的实现思路

创建一个隐藏的 textarea，放到 body 标签下，将 Textarea 组件的 value 值赋值给隐藏的 textarea，通过获取这个隐藏的 textarea 的 scrollHeight（scrollHeight 会返回该元素在不使用滚动条时的高度），来设置组件上面的 textarea 的高度。

2.2 计算自适应高度的方法

在 element-ui 源代码中，calcTextareaHeight.js 文件的 calcTextareaHeight 方法用于计算 textarea 的动态高度。

计算的步骤分析如下：

1. 首先获取 Input type="textarea" 组件的与元素大小有关全部 CSS 属性，将 textarea 的 box-sizing，上下边距的 padding，上下两边的 border 分别解构出来。
2. 创建一个 textarea 元素，将刚刚获取到的组件全部的样式，以及隐藏元素的样式全部给创建的 textarea。
3. 获取隐藏元素的 scrollHeight，返回的值是该元素在不使用滚动条的时候的 content 高度和 padding 整体高度，不包含 border 的高度。
4. 判断是标准盒子模型还是IE盒子模型，标准盒子模型的高度需要减去 padding 的上下边距总和，IE盒子模型的高度需要加上上下的 border 的总和。
5. 将 value 值设置为空，计算出一行的高度，用 scrollHeight 减去上下两边的内边距，就是一行文字内容的高度。
6. 如果传入了最小行数 minRows，则根据传入的最小行数计算出 textarea 的最小高度：
   （1）如果是IE盒子模型，则最小高度需要加上 padding 和 border。
   （2）取隐藏 textarea的高度和最小高度中较大的作为组件的最小高度 minHeight（取较大的是因为不能小于最小高度）。
7. 如果传入了最大行数 maxRows，则根据传入的最大行数计算出 textarea 的最大高度：
   （1）如果是IE盒子模型，则最小高度需要加上 padding 和 border。
   （2）取隐藏 textareas的高度和最大高度中较小的作为组件的高度 height（取较小的是因为不能大于最大高度）。

具体代码如下：

// 设置变量 hiddenTextarea 去存放隐藏的元素
let hiddenTextarea;

// 隐藏元素的 style
const HIDDEN_STYLE = `
  height:0 !important;
  visibility:hidden !important;
  overflow:hidden !important;
  position:absolute !important;
  z-index:-1000 !important;
  top:0 !important;
  right:0 !important
`;

// 影响 textarea 高度的全部相关的 CSS 属性
const CONTEXT_STYLE = [
  'letter-spacing',
  'line-height',
  'padding-top',
  'padding-bottom',
  'font-family',
  'font-weight',
  'font-size',
  'text-rendering',
  'text-transform',
  'width'