输入组件相对来说复杂一点,我们先从它用到的一个工具库<代码> calcTextareaHeight.js 进行分析。
calcTextareaHeight.js使用来计算文本框的高度的,我们根据代码顺序从上往下进行分析。
<强> HIDDEN_STYLE
HIDDEN_STYLE是一个常量,存储隐藏时候的css样式的。
const HIDDEN_STYLE='
高度:0 !重要;
可见性:隐藏!重要;
溢出:隐藏!重要;
位置:绝对!重要;
z - index: -1000 !重要;
上图:0 !重要;
右:0 !很重要
”;
之前
<强> CONTEXT_STYLE
CONTEXT_STYLE也是一个常量,用来存储要查询的样式名。
const CONTEXT_STYLE=[
字母间距,
“行高”,
“padding-top”,
“padding-bottom”,
“字体族”,
“粗细”,
“字体大小”,
“文本渲染”,
“首”,
“宽度”,
“文本”,
“padding-left”,
“padding-right”,
边框宽度,
“box-sizing”
];
之前
<强> calculateNodeStyling
calculateNodeStyling用来获取结点的某些样式。
函数calculateNodeStyling(节点){
const风格=window.getComputedStyle(节点);//获取结点的计算后的样式,即实际渲染的样式
const boxSizing=style.getPropertyValue (“box-sizing”);//获取box-sizing的值//上下的填充之和
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=比;“${名称}:$ {style.getPropertyValue(名字)}”)
. join (“;”);
返回{contextStyle、paddingSize borderSize, boxSizing};
}
之前
<强> calcTextareaHeight
calcTextareaHeight是最终暴露出去的函数,用来计算文本域的高度。
出口的默认函数calcTextareaHeight (
targetNode,//要计算的结点
minRows=null,//最小的行数
maxRows=null//最大的行数
){
如果(! hiddenTextarea){//来创建一个隐藏的文本域,所有的计算都是在这上面进行的
hiddenTextarea=document.createElement(“文本区域”);
document.body.appendChild (hiddenTextarea);
}//获取结点一些样式值
让{
paddingSize,
borderSize,
boxSizing,
contextStyle
}=calculateNodeStyling (targetNode);//设置相应的样式
hiddenTextarea。setAttribute(“风格”、“$ {contextStyle}; $ {HIDDEN_STYLE} ');//设置内容,按优先级一次是结点的值,结点的占位符,以及空字符串
hiddenTextarea。值=https://www.yisu.com/zixun/targetNode.value | | targetNode。占位符| |”;//获取滚动高度
让身高=hiddenTextarea.scrollHeight;
如果(boxSizing===border-box) {//如果是border-box,说明高度得加上边框
身高=身高+ borderSize;
}else if (boxSizing===内容框){//如果是内容框,说明得减去上下内边距
身高=身高- paddingSize;
}//计算单行高度,先清空内容
hiddenTextarea.valuehttps://www.yisu.com/zixun/=?//再用滚动高度减去上下内边距
让singleRowHeight=hiddenTextarea。scrollHeight - paddingSize;
如果(minRows !==null){//如果参数传递了minRows
让minHeight=singleRowHeight * minRows;//说明最少应当有这么多行的高度
如果(boxSizing===border-box){//如果是border-box,还得加上上下内边距和上下边框的宽度
minHeight=minHeight + paddingSize + borderSize;
}
身高=数学。马克斯(minHeight、高度);//取二者最大值
}
如果(maxRows !==null){//如果参数传递了maxRows
让maxHeight=singleRowHeight * maxRows;//说明最多只能有这么多行的高度
如果(boxSizing===border-box){//如果是border-box,还得加上上下内边距和上下边框的宽度
maxHeight=maxHeight + paddingSize + borderSize;
}
身高=数学。分钟(maxHeight、高度);//取二者最小值
}//返回文本域应当设置的高度
返回{高度:高度+ px的};
};
之前
