当我读element源码，我在读什么（一）
看的源码： el-form el-form-item，主要看的布局相关的。
总结：
- 通过设置
label的位置，调整不同的布局 - 主要是左右布局，即左侧
label，右侧content的布局
以下是读源码时的一些笔记：
input默认宽度
input的默认宽度和font-size有关
chrome浏览器中font-size: 14px时，input的默认宽度大概是174px
el-form-item 嵌套处理
即 el-form-item再嵌套el-form-item的情况；
form() {
let parent = this.$parent;
let parentName = parent.$options.componentName;
while (parentName !== 'ElForm') {
if (parentName === 'ElFormItem') {
this.isNested = true;
}
parent = parent.$parent;
parentName = parent.$options.componentName;
}
return parent;
}
如果是单纯的el-form-item嵌套（el-form-item没有设置label）,则不设置margin-left
if (!label && !this.labelWidth && this.isNested) return ret;
labelWidth:auto
如果传的label-width:auto，则通过 window.getComputedStyle 来获取 label的宽度;
从而计算出右侧content内容区的 margin-left的值
getLabelWidth() {
if (this.$el && this.$el.firstElementChild) {
const computedWidth = window.getComputedStyle(this.$el.firstElementChild).width;
return Math.ceil(parseFloat(computedWidth));
} else {
return 0;
}
}
provide/inject
form组件把自己provide出去，供子孙组件 inject，在子孙组件就可以很方便的调用父组件中的方法了。
因为这里涉及了至少3层组件：el-form --> el-form-item --> label-wrap ；
通过这种provide/inject 方式，在label-wrap组件中也能通过注入轻松拿到el-form-item、el-form组件，使用他们的方法。
// form组件中
provide() {
return {
elForm: this
};
}
// 在form-item组件中注入
inject: ['elForm'],
\
