elementuielinputtextarea可自适应文本高度的文本域分析

源代码

version:element-plus 1.0.1-beta.0

这里的指向是element-plus 但应该是一样的

let hiddenTextarea
// 隐藏的textarea样式
const HIDDEN_STYLE &＃61; &＃96;height:0 !important;visibility:hidden !important;overflow:hidden !important;position:absolute !important;z-index:-1000 !important;top:0 !important;right:0 !important;
&＃96;const CONTEXT_STYLE &＃61; [&＃39;letter-spacing&＃39;,&＃39;line-height&＃39;,&＃39;padding-top&＃39;,&＃39;padding-bottom&＃39;,&＃39;font-family&＃39;,&＃39;font-weight&＃39;,&＃39;font-size&＃39;,&＃39;text-rendering&＃39;,&＃39;text-transform&＃39;,&＃39;width&＃39;,&＃39;text-indent&＃39;,&＃39;padding-left&＃39;,&＃39;padding-right&＃39;,&＃39;border-width&＃39;,&＃39;box-sizing&＃39;,
]type NodeStyle &＃61; {contextStyle: stringboxSizing: stringpaddingSize: numberborderSize: number
}type TextAreaHeight &＃61; {height: stringminHeight?: string
}function calculateNodeStyling(targetElement): NodeStyle {const style &＃61; window.getComputedStyle(targetElement)// 获取box-sizing属性的值const boxSizing &＃61; style.getPropertyValue(&＃39;box-sizing&＃39;)// 上下padding值const paddingSize &＃61; (parseFloat(style.getPropertyValue(&＃39;padding-bottom&＃39;)) &＃43;parseFloat(style.getPropertyValue(&＃39;padding-top&＃39;)))// 上下borderconst borderSize &＃61; (parseFloat(style.getPropertyValue(&＃39;border-bottom-width&＃39;)) &＃43;parseFloat(style.getPropertyValue(&＃39;border-top-width&＃39;)))// const contextStyle &＃61; CONTEXT_STYLE.map(name &＃61;> &＃96;${name}:${style.getPropertyValue(name)}&＃96;).join(&＃39;;&＃39;)return { contextStyle, paddingSize, borderSize, boxSizing }
}// 创建一个textarea&＃xff0c;加入到body中&＃xff0c;css隐藏&＃xff0c;计算它的高度&＃xff0c;然后算出来的就是要自适应的高度&＃xff0c;在remove掉
export default function calcTextareaHeight(targetElement,minRows &＃61; 1,maxRows &＃61; null,
): TextAreaHeight {// 创建textarea&＃xff0c;加入到body中if (!hiddenTextarea) {hiddenTextarea &＃61; document.createElement(&＃39;textarea&＃39;)document.body.appendChild(hiddenTextarea)}const {paddingSize,borderSize,boxSizing,contextStyle,} &＃61; calculateNodeStyling(targetElement)// 设置隐藏起来的样式hiddenTextarea.setAttribute(&＃39;style&＃39;, &＃96;${contextStyle};${HIDDEN_STYLE}&＃96;)hiddenTextarea.value &＃61; targetElement.value || targetElement.placeholder || &＃39;&＃39;let height &＃61; hiddenTextarea.scrollHeightconst result &＃61; {} as TextAreaHeight// 根据box-sizing来计算heightif (boxSizing &＃61;&＃61;&＃61; &＃39;border-box&＃39;) {height &＃61; height &＃43; borderSize} else if (boxSizing &＃61;&＃61;&＃61; &＃39;content-box&＃39;) {height &＃61; height - paddingSize}hiddenTextarea.value &＃61; &＃39;&＃39;// 每行的高度const singleRowHeight &＃61; hiddenTextarea.scrollHeight - paddingSize// 传入最小行数if (minRows !&＃61;&＃61; null) {let minHeight &＃61; singleRowHeight * minRowsif (boxSizing &＃61;&＃61;&＃61; &＃39;border-box&＃39;) {minHeight &＃61; minHeight &＃43; paddingSize &＃43; borderSize}// height 取较大的值height &＃61; Math.max(minHeight, height)// 返回值中的最小高度result.minHeight &＃61; &＃96;${ minHeight }px&＃96;}// 传入最大行数if (maxRows !&＃61;&＃61; null) {let maxHeight &＃61; singleRowHeight * maxRowsif (boxSizing &＃61;&＃61;&＃61; &＃39;border-box&＃39;) {maxHeight &＃61; maxHeight &＃43; paddingSize &＃43; borderSize}// height 取较小的值height &＃61; Math.min(maxHeight, height)}// 返回值中的最大高度result.height &＃61; &＃96;${ height }px&＃96;// 移除隐藏的textareahiddenTextarea.parentNode?.removeChild(hiddenTextarea)hiddenTextarea &＃61; nullreturn result
}