Element Input组件分析小结

input组件相对来说复杂一点，我们先从它用到的一个工具库calcTextareaHeight.js进行分析。

calcTextareaHeight.js

calcTextareaHeight.js使用来计算文本框的高度的，我们根据代码顺序从上往下进行分析。

HIDDEN_STYLE

HIDDEN_STYLE是一个常量，存储隐藏时候的css样式的。

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`;

CONTEXT_STYLE

CONTEXT_STYLE也是一个常量，用来存储要查询的样式名。

const CONTEXT_STYLE = [ 'letter-spacing', 'line-height', 'padding-top', 'padding-bottom', 'font-family', 'font-weight', 'font-size', 'text-rendering', 'text-transform', 'width', 'text-indent', 'padding-left', 'padding-right', 'border-width', 'box-sizing'];

calculateNodeStyling

calculateNodeStyling用来获取结点的某些样式。

function calculateNodeStyling(node) { const style = window.getComputedStyle(node); // 获取结点的计算后的样式，即实际渲染的样式 const boxSizing = style.getPropertyValue('box-sizing'); // 获取 box-sizing 的值 // 上下的 padding 之和 const paddingSize = (  parseFloat(style.getPropertyValue('padding-bottom')) +  parseFloat(style.getPropertyValue('padding-top')) ); // 上下的边框宽度和（其实是看上去的高度） const borderSize = (  parseFloat(style.getPropertyValue('border-bottom-width')) +  parseFloat(style.getPropertyValue('border-top-width')) ); // 其他一些样式 const contextStyle = CONTEXT_STYLE  .map(name => `${name}:${style.getPropertyValue(name)}`)  .join(';'); return { contextStyle, paddingSize, borderSize, boxSizing };}

calcTextareaHeight

calcTextareaHeight是最终暴露出去的函数，用来计算文本域的高度。

export default function calcTextareaHeight( targetNode, // 要计算的结点 minRows = null, // 最小的行数 maxRows = null // 最大的行数) { if (!hiddenTextarea) { // 来创建一个隐藏的文本域，所有的计算都是在这上面进行的  hiddenTextarea = document.createElement('textarea');  document.body.appendChild(hiddenTextarea); } // 获取结点一些样式值 let {  paddingSize,  borderSize,  boxSizing,  contextStyle } = calculateNodeStyling(targetNode); // 设置相应的样式 hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`); // 设置内容，按优先级一次是 结点的 value， 结点的 placeholder， 以及空字符串 hiddenTextarea.value = targetNode.value || targetNode.placeholder || ''; // 获取滚动高度 let height = hiddenTextarea.scrollHeight; if (boxSizing === 'border-box') {  // 如果是 border-box，说明高度得加上边框  height = height + borderSize; } else if (boxSizing === 'content-box') {  // 如果是 content-box，说明得减去上下内边距  height = height - paddingSize; } // 计算单行高度，先清空内容 hiddenTextarea.value = ''; // 再用滚动高度减去上下内边距 let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize; if (minRows !== null) { // 如果参数传递了 minRows  let minHeight = singleRowHeight * minRows; // 说明最少应当有这么多行的高度  if (boxSizing === 'border-box') { // 如果是 border-box，还得加上上下内边距和上下边框的宽度   minHeight = minHeight + paddingSize + borderSize;  }  height = Math.max(minHeight, height); // 取二者最大值 } if (maxRows !== null) { // 如果参数传递了 maxRows  let maxHeight = singleRowHeight * maxRows; // 说明最多只能有这么多行的高度  if (boxSizing === 'border-box') { // 如果是 border-box，还得加上上下内边距和上下边框的宽度   maxHeight = maxHeight + paddingSize + borderSize;  }  height = Math.min(maxHeight, height); // 取二者最小值 } // 返回文本域应当设置的高度 return { height: height + 'px'};};