vue-模拟Element-UI实现form表单

通用文件入口-index.vue用户使用层主要用于定义：验证规则登录事件处理（全部验证通过或不调用全局弹窗）项目结构描述用户入口文件-inex.vue提交按钮login登录事件处理（所有验证通过与否调用全局弹窗）全局验证-From.vue全局验证，调用各自-构建验证结果单次输入内容的验证——FromItem.vue获取验证规则获取当前值importSchemafrom"async-validator"；导入验证模块以创建验证规则以执行验证if(erro){thi.message='errormessage'}else{this.messgae=''}type:text填写信息-Input.vue改变值并调用父组件Validation方法通知全局build-Vue.prototype。$notice(弹窗类建筑包)——全局注册建筑调用vue定义方法里面的create方法$notice方法传入建筑和props使用newVue生成建筑挂在穹顶上；idea：创建一个dom元素，将dom元素放在body里面显示后，消失操作，删除dom元素，销毁instance在newVue中，rednerh:中的参数h是一个createElement函数，可以返回一个虚拟的domecallnewVue().$mount()`$mount()`目的：vdome->domvm`vm`:newVue()constructorvm.$elrealdomelementvm.$children[Vuecomponent]constcomp=vm.$children[0]comp.remove=()=>{}为vue组件定义删除组件的方法使用newVue生成组件挂在穹顶上；/utils/create-constructcomponentinstancesimportVuefrom'vue'//实现一个create方法，可以创建指定的组件实例//并挂载到body上//组件是一个组件配置对象exportdefaultfunctioncreate(Component,props){//如何创建组件实例//方案一：可以通过Vue.extend(Component)//constCtor获取组件构造器=Vue.extend(Component)//constcomp=newCtor()//方案二：使用Vue构造组件实例constvm=newVue({render(h){//h是createElement函数，可以返回vdomreturnh(Component,{props})}}).$mount()//$mount()goal:vdom=》dom//手动追加domdocument.body.appendChild(vm.$el)constcomp=vm.$children[0]//消除逻辑comp.remove=()=>{document.body.removeChild(vm.$el)//执行remove方法时，执行$destroy销毁实例comp.$destroy()}returncomp}Buildcontent-/components/Notice.vue学习资源思维导图：https://www.processon.com/vie...github：https://github。com/speak44/Vu...