当前位置: 首页 > Web前端 > vue.js

自定义组件如何通过ElementUIForm验证

时间:2023-04-01 01:22:46 vue.js

混入emitterimportemitterfrom'element-ui/src/mixins/emitter'FormItemFormItem存在于下面的方法中validate(trigger,callback=noop){this.validateDisabled=false;construles=this.getFilteredRule(触发器);如果((!rules||rules.length===0)&&this.required===undefined){callback();返回真;}this.validateState='验证';const描述符={};if(rules&&rules.length>0){rules.forEach(rule=>{deleterule.trigger;});}描述符[this.prop]=规则;constvalidator=newAsyncValidator(描述符);常量模型={};模型[this.prop]=this.fieldValue;validator.validate(model,{firstFields:true},(errors,invalidFields)=>{this.validateState=!errors?'success':'error';this.validateMessage=errors?errors[0].message:'';回调(这。验证消息,无效字段);this.elForm&&this.elForm.$emit('validate',this.prop,!errors,this.validateMessage||null);});}FormItem具有以下侦听器this.$on('el.form.blur',this.onFieldBlur);this.$on('el.form.change',this.onFieldChange);因此,在您自己的组件中,只需触发此事件this.dispatch('ElFormItem','el.form.change',self.fileList)是改变还是模糊,取决于表单规则中的规则dispathdispatch:functiondispatch(componentName,eventName,params){varparent=这个。$父母||这个。$根;varname=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));}},可以看出dispath一直在死循环中查找父组件。