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'}; };
input.vue
input组件较为繁琐，我们一点点分析。
生命周期
created
创建的时候会监听inputSelect事件，并调用inputSelect方法。
created() { this.$on('inputSelect', this.inputSelect); },
inputSelect方法会调用refs上的input的原生的select方法，来选中该input。
methods: { inputSelect() { this.$refs.input.select(); }, }
mounted
挂载的时候，会调用resizeTextarea方法来设置文本域的大小。
mounted() { this.resizeTextarea(); }
methods: { resizeTextarea() { if (this.$isServer) return; // 如果是服务端渲染，直接返回，不进行下面的逻辑 var { autosize, type } = this; if (!autosize || type !== 'textarea') return; // 如果 autosize 是 false，或者当前不是文本域，也直接返回 const minRows = autosize.minRows; // 最少行数 const maxRows = autosize.maxRows; // 最大行数 this.textareaStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows); // 计算文本域的高度，并赋值 }, }
最外层
最外层是一个div，上面设置了一些动态的class。