Element-ui源码解析之el-form与el-form-item(二)

885 阅读1分钟

主要内容

上一篇文章中,分析了el-form和el-form-item是如何配合进行校验的,下面就来看看el-form除了model之前其他的props

rules

我们可以传入一个rules对象,然后el-form回去监听这个rules,其实还涉及到了另外一个propsvalidate-on-rule-change,如果validate-on-rule-change的值为true,那么它就会在rules的值发生改变时,立刻自动调用this.validate(() => {})来触发校验,否则就是在rules改变时,只做removeValidateEvents,在做addValidateEvents操作,rules的值会被el-form-item通过getRules方法拿到,getRules方法会先合并el-form-item本身的rules如果有的话,没有的话就合并el-form的rules,如果经过getRules操作之后,rules有值的话并且required不等于undefined,addValidateEvents就开始监听el-form-blur和el-form-change了

// el-form
watch: {
  rules() {
    // remove then add event listeners on form-item after form rules change
    this.fields.forEach((field) => {
      field.removeValidateEvents();
      field.addValidateEvents();
    });

    if (this.validateOnRuleChange) {
      this.validate(() => {});
    }
  },
},
// el-form-item methods
addValidateEvents() {
  const rules = this.getRules();

  if (rules.length || this.required !== undefined) {
    this.$on('el.form.blur', this.onFieldBlur);
    this.$on('el.form.change', this.onFieldChange);
  }
},
removeValidateEvents() {
  this.$off();
}

inline

如果inline为true就会加上相应的样式

<form
  class="el-form"
  :class="[
    labelPosition ? 'el-form--label-' + labelPosition : '',
    { 'el-form--inline': inline },
  ]"
>
  <slot></slot>
</form>

label-position

给label-position传入不同的值,也会添加的不同的样式,如上

label-width

会被传入el-form-item该值,可以为auto,如果el-form-item也设置了该值,就优先使用el-form-item的labelWidth

hide-required-asterisk

如果传入了该值,就会给el-form-item添加该样式

'is-no-asterisk': elForm && elForm.hideRequiredAsterisk

disabled

如果传入了该值,这element-ui一些表单的控件会被disabled,为什么el-form会provide一个el-form实例,每个表单空间都会inject注入这个实例,然后执行类似的代码

inputDisabled() {
  return this.disabled || (this.elForm || {}).disabled;
},

总结

不写了,太简单了,el-form的介绍就这些吧,后面没啥看的