Vue模仿ElementUI的form表单实例代码

2023-07-04 10:32:05 151

实现要求

模仿ElementUI的表单，分为四层结构：index组件、Form表单组件、FormItem表单项组件、Input和CheckBox组件，具体分工如下：

index组件：

实现：分别引入Form组件、FormItem组件、Input组件，实现组装；

Form表单组件：

实现：预留插槽、管理数据模型model、自定义校验规则rules、全局校验方法validate；

FormItem表单项组件：

实现：预留插槽、显示label标签、执行数据校验、显示校验结果；

Input和CheckBox组件：

实现：绑定数据模型v-model、通知FormItem组件执行校验；

Input组件

具体实现如下：

1、自定义组件要实现v-model必须实现:value和@input。

2、当输入框中的数据发生变化时，通知父组件执行校验。

3、当Input组件绑定的type类型为password时，在组件内部使用v-bind="$attrs"获取props之外的内容。

4、设置inheritAttrs为false,从而避免顶层容器继承属性。

Input组件实现：

注意：代码中使用this.$parent派发事件，这种写法不健壮，当Input组件和FormItem组件之间隔代时会出现问题。具体解决方式见文章尾部代码优化部分。

CheckBox组件

1、自定义实现checkBox的双向数据绑定，和input大同小异，必须实现:checked和@change。

CheckBox组件实现：

FormItem组件

具体实现如下：

1、给Input组件或者CheckBox组件预留插槽。

2、如果用户在组件上设置label属性，要展示label标签。

3、监听校验事件，并执行校验（使用async-validator插件进行校验）。

4、如果不符合校验规则，需要显示校验结果。

在开发的过程中，我们需要思考几个问题：

1、在组件内部，如何得到需要校验的数据和校验规则？

2、在Form表单中会有多个菜单项，如：用户名、密码、邮箱...等等，那么FormItem组件是如何得知现在校验的是哪个菜单呢？

FormItem组件实现：






@labelWidth:90px;

.formItem-wrapper{
padding-bottom:10px;
}
.content{
display:flex;
}
.errorStyle{
font-size:12px;
color:red;
margin:0;
padding-left:@labelWidth;
}

我们先回答一下上面提出的两个问题，此处会涉及到组件之间传值，可以参考之前的文章《组件传值、通讯》：
首先表单的数据和校验规则是定义在index组件内部，并且挂载在Form组件上，表单的校验项发生在FormItem组件中，先在Form组件内部通过props接受到传递的数据，然后通过provide/inject的方式在FormItem组件中传递给后代组件。

我们日常在用ElementUI的表单校验是会发现，在每一个需要校验的表单上会设置一个prop属性，并且属性值和绑定的数据一致。此处的用途是为了能够在FormItem组件中执行校验时获取相对的校验规则和数据对象。

在FormItem组件中通过使用inject获取注入的Form实例，和prop属性组合使用，可以获取到表单数据和校验规则。

//1、获取数据
constvalues=this.formModel.model[this.prop];

//2、获取校验规则
construles=this.formModel.rules[this.prop];

使用async-validator插件实例化一个schema对象，用来执行校验，schema.validate需要传递两个参数，参数1是当前需要校验的字段和相对应的rules组成的键值对对象，参数2是一个callback函数，用来获取错误信息（是一个数组）。validate方法返回的是一个Promise。

注意：此组件的validate方法中，最后使用return的目的是为了在Form组件中执行全局校验使用。

Form组件

具体实现如下：

1、给FormItem组件预留插槽。

2、传递Form实例给后代，比如FormItem用来获取校验的数据和规则。

3、执行全局校验

Form组件实现：

我们在Form组件中使用provide注入当前组件对象，方便后续子孙代获取数据/方法使用。

执行全局校验的时候，先使用filter过滤掉不需要校验的组件（我们在FormItem组件上设置的prop属性，只要有此属性，就是需要校验的），然后分别执行组件中的validate方法（如果在FormItem组件中不使用return数据，最后获取到的全都是undefined），返回的是一个若干 Promise数组。

简单介绍一个Promise.all()方法：

Promise.all()方法接收一个promise的iterable类型（注：Array，Map，Set都属于ES6的iterable类型）的输入，并且只返回一个Promise实例，那个输入的所有promise的resolve回调的结果是一个数组。这个Promise的resolve回调执行是在所有输入的promise的resolve回调都结束，或者输入的iterable里没有promise了的时候。它的reject回调执行是，只要任何一个输入的promise的reject回调执行或者输入不合法的promise就会立即抛出错误，并且reject的是第一个抛出的错误信息。

index组件

定义模型数据、校验规则等等，分别引入Form组件、FormItem组件、Input组件，实现组装。

index组件实现：

当我们点击登录按钮时，会执行全局校验方法，我们可以使用this.$refs.xxx获取DOM元素和组件实例。

在上面我们还留了一个小尾巴~，就是在Input组件中通知父组件执行校验，目前使用的是this.$parent.$emit()，这样写有一个弊端，就是当Input组件和FormItem组件之后隔代的时候，再使用this.$parent获取不到FormItem组件。
我们可以封装一个dispatch方法，主要实现向上循环查找父元素并且派发事件，代码实现如下：

dispatch(eventName,data){
letparent=this.$parent;
//查找父元素
while(parent){
//父元素用$emit触发
parent.$emit(eventName,data);
//递归查找父元素
parent=parent.$parent;
}
}

该方法可以借用mixins引入使用：mixins/emmiters.js

exportdefault{
methods:{
dispatch(eventName,data){
letparent=this.$parent;
//查找父元素
while(parent){
//父元素用$emit触发
parent.$emit(eventName,data);
//递归查找父元素
parent=parent.$parent;
}
}
}
};

修改Input组件：

总结

到此这篇关于Vue模仿ElementUI的form表单的文章就介绍到这了,更多相关Vue模仿ElementUIform表单内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Vue模仿ElementUI的form表单实例代码

实现要求

Input组件

CheckBox组件

FormItem组件

Form组件

index组件

总结

热门推荐

随机推荐