让 ElemntUI 自定义组件支持表单验证
自定义组件内部在 blur 和 change 后增加:
import emitter from 'element-ui/src/mixins/emitter';
let {
methods: { dispatch },
} = emitter;
methods: {
onChange () {
dispatch.call(this, 'ElFormItem', 'el.form.change', this.value);
},
onBlur () {
dispatch.call(this, 'ElFormItem', 'el.form.blur', this.value);
}
}
也可以调用自己写的 dispatch() 方法:
<el-form-item label="备注" prop="description">
<field v-model="form.description" @blur="dispatch('Field', 'blur', form.descrription)" />
</el-form-item>
methods: {
dispatch(componentName, eventName, params) {
let self = this;
let parent = self.$parent || self.$root;
let 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));
}
},
},