道招

element-ui表单源码解析之el-form-item

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

element-ui表单源码解析之el-form-item

上一篇看了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的值也是通过修改返回的值来完成的

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联系在一起的。

更新时间:
上一篇:element-ui表单源码解析之el-form下一篇:element-ui表单源码解析之el-input

相关文章

js网页特效:星星闪动的标题栏特效

js网页特效:星星闪动的标题栏特效实现此功能其实很简单的。 要完成此效果加入如下代码 title_tmp1 = document.title if (title_tmp1.indexOf("&g 阅读更多…

命令式组件Message、Dialog的主流写法分析

这里还是以element-ui为例,那我们就看看里面的Message。 它的dom结构什么的就写在node-modules/element-ui/packages/notification/src/ 阅读更多…

element-ui表单源码解析之el-form

表单时大家常用的,根据本站的百度统计后台显示来到道招网的程序很多都在关注 《element-ui动态表单async-validate校验 please transfer a valid prop p 阅读更多…

前端面试题 小明早餐午餐晚餐

题目为:有如下js语句 Human('小明').sleep(2).eat('早餐').sleep(3).eat('午餐').sleep(4).eat('晚餐').sleepFirst(1); 阅读更多…

wangEditor输入中文后直接粘贴bug来了解compositionstart

昨天有人反馈邮件编辑过程中的一个报障,具体内容就是在编辑器中输入中文然后直接粘贴先前复制好的信息,然后出现了bug,比如之前复制了订单号“1234”,再输入“您的订单号”后直接粘贴,编辑器内显示的结 阅读更多…

element-ui表单源码解析之el-input

关于表单校验el-input做的主要工作就是跟el-form-item交互,把input的相关事件发送给el-form-item,上一篇已经讲到在el-form-item的mounted的生命周期里 阅读更多…

关注道招网公众帐号
道招开发者二群