上一篇看了el-form,功能比较简单,现在来看看el-form-item

<!--el-form-item源码-->
<template>
  <div class="el-form-item" :class="[{
      'el-form-item--feedback': elForm && elForm.statusIcon,
      'is-error': validateState === 'error',
      'is-validating': validateState === 'validating',
      'is-success': validateState === 'success',
      'is-required': isRequired || required,
      'is-no-asterisk': elForm && elForm.hideRequiredAsterisk
    },
    sizeClass ? 'el-form-item--' + sizeClass : ''
  ]">
    <label :for="labelFor" class="el-form-item__label" :style="labelStyle" v-if="label || $slots.label">
      <slot name="label">{{label + form.labelSuffix}}</slot>
    </label>
    <div class="el-form-item__content" :style="contentStyle">
      <slot></slot>
      <transition name="el-zoom-in-top">
        <slot 
          v-if="validateState === 'error' && showMessage && form.showMessage" 
          name="error" 
          :error="validateMessage">
          <div
            class="el-form-item__error"
            :class="{
              'el-form-item__error--inline': typeof inlineMessage === 'boolean'
                ? inlineMessage
                : (elForm && elForm.inlineMessage || false)
            }"
          >
            {{validateMessage}}
          </div>
        </slot>
      </transition>
    </div>
  </div>
</template>

结构也很简单,两个插槽,一个是label,一个匿名插槽放内容, transition时用作校验信息的动画。

mixins: [emitter],

provide() {
    return {
        elFormItem: this
    };
},

inject: ['elForm'],

这里看出form-item支持this.dispatchthis.broadcast来实现向上发送事件和向下广播事件。根据上一篇已经知道这里肯定会inject父组件elForm的,同时它还把自己给provide出去了。
它的props相对简单,就不单独讲了。

看到watch里面有

// el-form-item源码
watch: {
    error: {
        immediate: true,
            handler(value) {
            this.validateMessage = value;
            this.validateState = value ? 'error' : '';
        }
    },
        validateStatus(value) {
            this.validateState = value;
        }
},

上面的errorvalidateStatus就是props里面的,说明如果有外部组件通过传参改变这个两个信息的话, el-form-item会优先听从外部值。

接下来看看computed

computed: {
      labelFor() {
        return this.for || this.prop;
      },
      labelStyle() {
        const ret = {};
        if (this.form.labelPosition === 'top') return ret;
        const labelWidth = this.labelWidth || this.form.labelWidth;
        if (labelWidth) {
          ret.width = labelWidth;
        }
        return ret;
      },
      contentStyle() {
        const ret = {};
        const label = this.label;
        if (this.form.labelPosition === 'top' || this.form.inline) return ret;
        if (!label && !this.labelWidth && this.isNested) return ret;
        const labelWidth = this.labelWidth || this.form.labelWidth;
        if (labelWidth) {
          ret.marginLeft = labelWidth;
        }
        return ret;
      },
      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;
      },
      fieldValue() {
        const model = this.form.model;
        if (!model || !this.prop) { return; }

        let path = this.prop;
        if (path.indexOf(':') !== -1) {
          path = path.replace(/:/, '.');
        }

        return getPropByPath(model, path, true).v;
      },
      isRequired() {
        let rules = this.getRules();
        let isRequired = false;

        if (rules && rules.length) {
          rules.every(rule => {
            if (rule.required) {
              isRequired = true;
              return false;
            }
            return true;
          });
        }
        return isRequired;
      },
      _formSize() {
        return this.elForm.size;
      },
      elFormItemSize() {
        return this.size || this._formSize;
      },
      sizeClass() {
        return this.elFormItemSize || (this.$ELEMENT || {}).size;
      }
    },

其中labelStylecontentStyle都会根据this.form.labelPositionthis.form.inlinethis.labelWidth以及接下来讲的this.isNested来设置lable和内容对应的样式
计算this.form会通过递归查找父组件来找到它最近的el-form组件,并且会根据父组件是否含有el-form-item来判断自身是否备嵌套。
computed里面的fieldValue觉得有毕竟讲一下

fieldValue() {
    const model = this.form.model;
    if (!model || !this.prop) { return; }

    let path = this.prop;
    if (path.indexOf(':') !== -1) {
        path = path.replace(/:/, '.');
    }

    return getPropByPath(model, path, true).v;
},
  1. 如果el-from对没有model或者当前el-form-item没有设置prop的话,不计算fieldValue
  2. 会根据prop计算得出path,然后由pathgetPropByPath(model, path, true).v作为当前的fieldValue
  3. 如果prop已经是含有冒号的话,直接使用prop作为path,否则如果有小数点需要将小数点.替换成/之后作为path使用。
    敲黑板!!!接下来要看getPropByPath方法,也就是这个方法容易报出please transfer a valid prop path to form item!
    代码不多,直接贴出来讲清楚

    //element-ui/src/utils/util源
    export function getPropByPath(obj, path, strict) {
    let tempObj = obj;
    path = path.replace(/\[(\w+)\]/g, '.$1');
    path = path.replace(/^\./, '');
    
    let keyArr = path.split('.');
    let i = 0;
    for (let len = keyArr.length; i < len - 1; ++i) {
    if (!tempObj && !strict) break;
    let key = keyArr[i];
    if (key in tempObj) {
      tempObj = tempObj[key];
    } else {
      if (strict) {
        throw new Error('please transfer a valid prop path to form item!');
      }
      break;
    }
    }
    return {
    o: tempObj,
    k: keyArr[i],
    v: tempObj ? tempObj[keyArr[i]] : null
    };
    };

    里面的path.replace(/\[(\w+)\]/g, '.$1');是将类似obj[key]的path转换为 obj.key
    path.replace(/^\./, '')就是去掉path前面的第一个.
    等到path的转换工作完成了,就将其按照.分割得到keyArr

    let i = 0;
    for (let len = keyArr.length; i < len - 1; ++i) {
    if (!tempObj && !strict) break;
    let key = keyArr[i];
    if (key in tempObj) {
      tempObj = tempObj[key];
    } else {
      if (strict) {
        throw new Error('please transfer a valid prop path to form item!');
      }
      break;
    }
    }

    keyArr除了最后一个外都进行for循环,在strict为true的情况下,循环不会break,同时重新赋值tempObj,并且如果keyArr的元素不在tempObj里面就会报错了,这就是大家常见的please transfer a valid prop path to form item!
    最后返回

    return {
    o: tempObj,
    k: keyArr[i],
    v: tempObj ? tempObj[keyArr[i]] : null
    };

    里面的对象的o就是最终的tempObj,k就是keyAr里面的最后一个元素,v就是k对应的key在tempObj的value。

一鼓作气,我们再看看其它使用getPropByPath的方法:

getRules获取校验规则
getRules() {
    let formRules = this.form.rules;
    const selfRules = this.rules;
    const requiredRule = this.required !== undefined ? { required: !!this.required } : [];

    const prop = getPropByPath(formRules, this.prop || '');
    formRules = formRules ? (prop.o[this.prop || ''] || prop.v) : [];

    return [].concat(selfRules || formRules || []).concat(requiredRule);
},

先设置formRules的初始值为el-form的rules,设置selfRules为el-form-item自己的rules,自己判断是否为必填项,转换为对应的格式{ required: !!this.required },然后重新计算赋值formRules
上面的prop就是getPropByPath的返回值。prop.o就是之前提到的tempObj的,里面如果有this.prop的属性的话就赋值给formRules,否则用prop.v的值赋值给formRules。最终这个el-form-item的校验规则就是:

  1. 如果有自身规则就是自身规则+是否必填
  2. 否则就是表单里的规则+是否必填
resetField重置表单

getPropByPath的方法的使用套路基本一样,同样将返回值赋值给prop。
重置操作pro的值也是通过修改返回的值来完成的

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "ca-pub-3013839362871866",
          enable_page_level_ads: true
     });
</script>
if (Array.isArray(value)) {
    prop.o[prop.k] = [].concat(this.initialValue);
} else {
    prop.o[prop.k] = this.initialValue;
}

顺便说一下初始值initialValue是怎么获取的。
mounted生命周期里面

let initialValue = this.fieldValue;
if (Array.isArray(initialValue)) {
    initialValue = [].concat(initialValue);
}
Object.defineProperty(this, 'initialValue', {
    value: initialValue
});

利用Object.defineProperty使得initialValue创建后不得改变了,毕竟后续的重置就靠它了。
继续看computed里面的,剩下_formSizeelFormItemSize以及sizeClass比较简单,逻辑都是只有el-form-item设置了使用el-form-item的值,否则使用el-form的值。只是里面有个this.$ELEMENT不知道是什么,也没搜到哪里给赋值了一个$ELEMENT,有知道的童鞋可以告知下,谢谢了。

接下来看看methods

在看最重要的validate之前,我们先看看其它的准备工作的方法
getRules前面已经讲到了。getFilteredRule是根据指定的trigger来过滤相应的rules并且用的深复制返回的,因为后面会看到delete rule.trigger;
好,我们可以看到validate方法了

validate(trigger, callback = noop) {
    this.validateDisabled = false;
    const rules = this.getFilteredRule(trigger);
    if ((!rules || rules.length === 0) && this.required === undefined) {
        callback();
        return true;
    }

    this.validateState = 'validating';

    const descriptor = {};
    if (rules && rules.length > 0) {
        rules.forEach(rule => {
            delete rule.trigger;
        });
    }
    descriptor[this.prop] = rules;

    const validator = new AsyncValidator(descriptor);
    const model = {};

    model[this.prop] = this.fieldValue;

    validator.validate(model, { firstFields: true }, (errors, invalidFields) => {
        this.validateState = !errors ? 'success' : 'error';
        this.validateMessage = errors ? errors[0].message : '';

        callback(this.validateMessage, invalidFields);
        this.elForm && this.elForm.$emit('validate', this.prop, !errors, this.validateMessage || null);
    });
},

首先是根据指定的trigger拿到需要校验的rules,如果没有或者是不是必填项,直接执行回调,并且校验通过。将descriptor转换成类似下面的格式,并依次生成实例validator。const validator = new AsyncValidator(descriptor)

descriptor = {
    userName: [{
        required: true,
    }]
}

剩下的校验就通过validator校验了。又兴趣的可以直接看看async-validator的源码。
methods里面剩下的都比较简单了

onFieldBlur() {
    this.validate('blur');
},
onFieldChange() {
    if (this.validateDisabled) {
        this.validateDisabled = false;
        return;
    }

    this.validate('change');
}

都是触发某个事件后,然后根据该事件进行相应的校验了。
而相应的时间都是在mounted生命周期里面开始监听的。

this.dispatch('ElForm', 'el.form.addField', [this]);
if (rules.length || this.required !== undefined) {
    this.$on('el.form.blur', this.onFieldBlur);
    this.$on('el.form.change', this.onFieldChange);
}

以及

beforeDestroy() {
    this.dispatch('ElForm', 'el.form.removeField', [this]);
}

今天写了不少了,个人感觉分析的还是挺具体的,部分省略的都过于简单,就不浪费时间了。
下一篇就该分享el-input了,看看它是怎么和el-form和el-form-item联系在一起的。


发表评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据