美文网首页
Element UI from 组件验证触发流程

Element UI from 组件验证触发流程

作者: HE_Zoro | 来源:发表于2021-04-22 17:47 被阅读0次

1.在各个组件混入 dispatch 方法。
emitter.js

dispatch(componentName, eventName, params) {
      var parent = this.$parent || this.$root;
      var name = parent.$options.componentName;

      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;

        if (parent) {
          name = parent.$options.componentName;
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },
  1. 在input select 等组件中,value 变化的时候 dispatch 该事件
    input.vue
watch: {
      value(val) {
        this.$nextTick(this.resizeTextarea);
        if (this.validateEvent) {
          this.dispatch('ElFormItem', 'el.form.change', [val]);
        }
      },
    }
  1. 在formItem 组件中监听,执行验证相关逻辑
    form-item.vue
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);
        }
      },

相关文章

网友评论

      本文标题:Element UI from 组件验证触发流程

      本文链接:https://www.haomeiwen.com/subject/husfrltx.html