首页 » 前端 » ElementUI » 正文

让 ElemntUI 自定义组件支持表单验证

发布者:站点默认
2023/07/15 浏览数(501) 分类:ElementUI 让 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));
    }
  },
},
点击返回顶部
  1. 留言
  2. 联系方式