手把手教你用Vue.js封装Form组件
前言:
在日常使用vue开发WEB项目中,经常会有提交表单的需求。我们可以使用 iview 或者 element 等组件库来完成相关需求;但我们往往忽略了其中的实现逻辑,如果想深入了解其中的实现细节,本文章从0到1,手把手教你封装一个属于自己的Form组件! 实例代码 https://github.com/zhengjunxiang/vue-form
Form 组件概览
表单类组件有多种,比如输入框(Input)、单选(Radio)、多选(Checkbox)等。在使用表单时,也会经常用到数据校验,如果每次都写校验程序来对每一个表单的输入值进行校验,会很低效,因此需要一个能够校验基础表单控件的组件,也就是本节要完成的Form
组件。
Form
组件分为两个部分,一个是外层的Form
表单域组件,一组表单控件只有一个Form
,而内部包含了多个FormItem
组件,每一个表单控件都被一个FormItem
包裹。基本的结构看起来像:
<!-- ./src/views/Form.vue -->
<iForm ref="form" :model="formData" :rules="rules"><iFormItem label="名称:" prop="name"><iInput v-model="formData.name" ></iInput></iFormItem><iFormItem label="邮箱:" prop="mail"><iInput v-model="formData.mail"></iInput></iFormItem><button @click="handleSubmit">提交</button><button @click="handleReset">重置</button>
</iForm>
Form 需要有输入校验,并在对应的 FormItem 中给出校验提示,校验我们会用到一个开源库:async-validator。使用规则大概如下:
[{ required: true, message: '不能为空', trigger: 'blur' },{ type: 'email', message: '格式不正确', trigger: 'blur' }
]
required
表示必填项,message
表示校验失败时的提示信息,trigger
表示触发校验的条件,它的值有blur
和change
表示失去焦点和正在输入时进行校验。如果第一条满足要求,再进行第二条的验证,type
表示校验类型,值为email
表示校验输入值为邮箱格式,还支持自定义校验规则。更详细的用法可以参看它的文档。
初始化项目
使用 Vue CLI 3 创建项目(具体使用可以查看官方文档),同时下载 async-validator 库。
初始化项目完项目后,在 src/components
下新建一个form
文件夹,并初始化两个组件 form.vue
和 formItem.vue
和一个input.vue
,同时可以按照自己的想法配置路由。初始完项目后src
下的项目录如下:
./src
├── App.vue
├── assets
│ └── logo.png
├── components
│ ├── form
│ │ ├── form.vue
│ │ └── formItem.vue
│ └── input.vue
├── main.js
├── mixins
│ └── emitter.js
├── router.js
└── views└── Form.vue
接口实现
组件的接口来自三个部分:props
、slots
、events
。Form
和FormItem
两个组件用来做输入数据校验,用不到 events
。Form
的 slot
就是一系列的 FormItem
,FormItem
的 slot
就是具体的表单如: <iInput>
。
在 Form
组件中,定义两个 props
:
- model:表单控件绑定的数据对象,在校验或重置时会访问该数据对象对应数据,类型为
Object
。 - rules:表单校验规则,即上面介绍的
async-validator
所使用的校验规则,类型为Object
。
在FormItem
组件中,也定义两个props
:
- label:单个表单组件的标签文本,类似原生的
<label>
元素,类型为String
。 - prop:对应表单域
Form
组件model
里的字段,用于在校验或重置时访问表单组件绑定的数据,类型为String
。
定义完后,调用页面的代码如下:
<template><div class="home"><h3>Form (校验表单)</h3><iForm ref="form" :model="formData" :rules="rules"><iFormItem label="名称:" prop="name"><iInput v-model="formData.name"></iInput></iFormItem><iFormItem label="邮箱:" prop="mail"><iInput v-model="formData.mail"></iInput></iFormItem></iForm></div>
</template><script>
// @ is an alias to /src
import iForm from '@/components/form/form.vue'
import iFormItem from '@/components/form/formItem.vue'
import iInput from '@/components/input.vue'export default {name: 'home',components: { iForm, iFormItem, iInput },data() {return {formData: { name: '', mail: '' },rules: {name: [{ required: true, message: '不能为空', trigger: 'blur'}],mail: [{ required: true, message: '不能为空', trigger: 'blur'},{ type: 'email', message: '邮箱格式不正确', trigger: 'blur'}]}}}
}
</script>
代码中的 iForm
、iFormItem
和 iInput
组件的实现细节将在后边的内容涉及。
到此,iForm
和 iFormItem
组件的代码如下:
<!-- ./src/components/form/form.vue -->
<template><div><slot></slot></div>
</template>
<script>
export default {name: 'iForm',data() {return { fields: [] }},props: {model: { type: Object },rules: { type: Object }},created() {this.$on('form-add', field => {if (field) this.fields.push(field);});this.$on('form-remove', field => {if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);})}
}
</script>
<!-- ./src/components/form/formItem.vue -->
<template><div><label v-if="label">{{ label }}</label><slot></slot></div>
</template>
<script>
export default {name: 'iFormItem',props: {label: { type: String, default: '' },prop: { type: String }}
}
</script>
在 iForm
组件中设置了 fields
数组来保存组件中的表单实例,方便接下来获取表单实例来判断各个表单的校验情况;
并在 created
生命周期中就绑定两个监听事件 form-add
和 form-remove
用于添加和移除表单实例。
接下来就是实现刚才提到绑定事件 ,但在实现之前我们要设想下,我们要怎么调用绑定事件这个方法?
在 Vue.js 1.x 版本,有this.$dispatch
方法来绑定自定义事件,但在 Vue.js 2.x 里废弃了。但我们可以实现一个类似的方法,调用方式为 this.dispatch
少了 $
来于之前的旧 API 做区分。
我们可以把该方法单独写到 emitter.js
文件中,然后通过组件中的 mixins
方式引用,达到代码复用。在 src
中创建文件夹 mixins
然后在其中创建 emitter.js
,具体代码如下:
<!-- ./src/mixins/emitter.js -->
export default {methods: {dispatch(componentName, eventName, params) {let parent = this.$parent || this.$root;let name = parent.$options.name;while (parent && (!name || name !== componentName)) {parent = parent.$parent;if (parent) name = parent.$options.name;}if (parent) parent.$emit.apply(parent, [eventName].concat(params));}}
}
可以看到该 dispatch
方法通过遍历组件的 $parent.name
来和传入的参数 componentName
做对比,当找到目标父组件时就通过调用父组件的 $emit
来触发参数 eventName
对应的绑定事件。
接下来在 formItem.vue
中通过 mixins
引入 dispatch
方法,实现触发绑定事件 form-add
和 form-remove
, 代码如下:
<!-- ./src/components/form/formItem.vue -->
<template><div><label v-if="label">{{ label }}</label><slot></slot></div>
</template>
<script>
import Emitter from '@/mixins/emitter.js';
export default {name: 'iFormItem',mixins: [ Emitter ],props: {label: { type: String, default: '' },prop: { type: String }},mounted() {if (this.prop) {this.dispatch('iForm', 'form-add', this);}},// 组件销毁前,将实例从 Form 的缓存中移除beforeDestroy () {this.dispatch('iForm', 'form-remove', this);},
}
</script>
接下来是实现 formItem.vue
的输入数据校验功能,在校验是首先需要知道校验的规则,所以我们先要拿到 Form.vue
中的 rules
对象。
- 在
Form.vue
中rules
对象通过props
传给iForm
组件,那么我们可以在iForm
组件中通过provide
的方式导出该组件实例,让子组件可以获取到其props
中的rules
对象; - 子组件
formItem
可以通过inject
的方式注入需要访问的实例;
此时代码如下:
<!-- ./src/components/form/form.vue -->
...
export default {name: 'iForm',data() {return { fields: [] }},props: {model: { type: Object },rules: { type: Object }},provide() {return { form: this }},created() {this.$on('form-add', field => {if (field) this.fields.push(field);});this.$on('form-remove', field => {if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);})}
}
</script>
<!-- ./src/components/form/formItem.vue -->
...
import Emitter from '@/mixins/emitter.js';
export default {name: 'iFormItem',mixins: [ Emitter ],inject: [ 'form' ],props: {label: { type: String, default: '' },prop: { type: String }},mounted() {if (this.prop) {this.dispatch('iForm', 'form-add', this);}},// 组件销毁前,将实例从 Form 的缓存中移除beforeDestroy () {this.dispatch('iForm', 'form-remove', this);},
}
</script>
现在在 formItem
中就可以通过 this.form.rules
来获取到规则对象了;
有了规则对象以后,就可以设置具体的校验方法了;
- setRules: 设置具体需要监听的事件,并触发校验;
- getRules:获取该表单对应的校验规则;
- getFilteredRule:过滤出符合要求的 rule 规则;
- validate:具体的校验过程;
...
具体代码如下:
<!-- ./src/components/form/formItem.vue -->
<template><div><label :for="labelFor" v-if="label" :class="{'label-required': isRequired}">{{label}}</label><slot></slot><div v-if="isShowMes" class="message">{{message}}</div></div>
</template>
<script>
import AsyncValidator from 'async-validator';
import Emitter from '@/mixins/emitter.js';
export default {name: 'iFormItem',mixins: [ Emitter ],inject: [ 'form' ],props: {label: { type: String, default: '' },prop: { type: String }},data() {return {isRequired: false, isShowMes: false, message: '', labelFor: 'input' + new Date().valueOf()}},mounted() {if (this.prop) {this.dispatch('iForm', 'form-add', this);// 设置初始值this.initialValue = this.fieldValue;this.setRules();}},// 组件销毁前,将实例从 Form 的缓存中移除beforeDestroy () {this.dispatch('iForm', 'form-remove', this);},computed: {fieldValue() {return this.form.model[this.prop]}},methods: {setRules() {let rules = this.getRules();if (rules.length) {rules.forEach(rule => {if (rule.required !== undefined) this.isRequired = rule.required});}this.$on('form-blur', this.onFieldBlur);this.$on('form-change', this.onFieldChange);},getRules() {let formRules = this.form.rules;formRules = formRules ? formRules[this.prop] : [];return formRules;},// 过滤出符合要求的 rule 规则getFilteredRule (trigger) {const rules = this.getRules();return rules.filter(rule => !rule.trigger || rule.trigger.indexOf(trigger) !== -1);},/*** 校验表单数据* @param trigger 触发校验类型* @param callback 回调函数*/validate(trigger, cb) {let rules = this.getFilteredRule(trigger);if(!rules || rules.length === 0) return true;// 使用 async-validatorconst validator = new AsyncValidator({ [this.prop]: rules });let model = {[this.prop]: this.fieldValue}; validator.validate(model, { firstFields: true }, errors => {this.isShowMes = errors ? true : false;this.message = errors ? errors[0].message : '';if (cb) cb(this.message);})},resetField () {this.message = '';this.form.model[this.prop] = this.initialValue;},onFieldBlur() {this.validate('blur');},onFieldChange() {this.validate('change');}}
}
</script>
<style>.label-required:before {content: '*';color: red;}.message {font-size: 12px;color: red;}
</style>
注意:这次除了增加了具体的校验方法外,还有错误提示信息的显示逻辑 <label>
标签的 for
属性设置;到此,formItem
组件完成。
有了 formItem
组件我们就可以用它了包裹 input
组件:
- 在
input
组件中通过@input
和@blur
这两个事件来触发formItem
组件的form-change
和form-blur
的监听方法。需要特别注意:在handleInput
中需要调用this.$emit('input', value)
,把input
中输入的value
传给在实例调用页面中的formData
,代码如下:
<!-- ./src/views/Form.vue -->
// 省略部分代码
<template><div class="home"><h3>Form (校验表单)</h3><iForm ref="form" :model="formData" :rules="rules"><iFormItem label="名称:" prop="name"><iInput v-model="formData.name"></iInput></iFormItem><iFormItem label="邮箱:" prop="mail"><iInput v-model="formData.mail"></iInput></iFormItem></iForm></div>
</template><script>
// @ is an alias to /src
import iForm from '@/components/form/form.vue'
import iFormItem from '@/components/form/formItem.vue'
import iInput from '@/components/input.vue'
// formData中的数据通过v-model的方试进行绑定,
// 在 input 组件中调用 this.$emit('input', value) 把数据传给 formData
export default {name: 'home',components: { iForm, iFormItem, iInput },data() {return {formData: { name: '', mail: '' }}}
}
</script>
- 并在组件中
watch
其输入的value
值,赋值给input
组件;
实现代码如下:
<!-- ./src/components/input.vue -->
<template><div><input ref="input" :type="type" :value="currentValue" @input="handleInput" @blur="handleBlur" /></div>
</template>
<script>
import Emitter from '@/mixins/emitter.js';
export default {name: 'iInput',mixins: [ Emitter ],props: {type: { type: String, default: 'text'},value: { type: String, default: ''}},watch: {value(value) {this.currentValue = value}},data() {return { currentValue: this.value, id: this.label }},mounted () {if (this.$parent.labelFor) this.$refs.input.id = this.$parent.labelFor;},methods: {handleInput(e) {const value = e.target.value;this.currentValue = value;this.$emit('input', value);this.dispatch('iFormItem', 'form-change', value);},handleBlur() {this.dispatch('iFormItem', 'form-blur', this.currentValue);}}
}
</script>
input
组件到此就完成,现在我们可以接着在 form
组件实现表单提交时,校验所有表单,和重置所用表单的功能了:
<!-- ./src/components/form/form.vue -->
<template><div><slot></slot></div>
</template>
<script>
export default {name: 'iForm',data() {return { fields: [] }},props: {model: { type: Object },rules: { type: Object }},provide() {return { form: this }},methods: {resetFields() {this.fields.forEach(field => field.resetField())},validate(cb) {return new Promise(resolve => {let valid = true, count = 0;this.fields.forEach(field => {field.validate('', error => {if (error) valid = false;if (++count === this.fields.length) {resolve(valid);if (typeof cb === 'function') cb(valid);}})})})}},created() {this.$on('form-add', field => {if (field) this.fields.push(field);});this.$on('form-remove', field => {if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);})}
}
</script>
- validate: 获取所有表单的校验结果,并做对应逻辑处理;
- resetFields: 重置所有表单;
现在让我们回到最初的调用页面 ./src/views/Form.vue
下,添加两个按钮,分别用于提交表单和重置表单:
<!-- ./src/views/Form.vue -->
<template><div class="home"><h3>Form (校验表单)</h3><iForm ref="form" :model="formData" :rules="rules"><iFormItem label="名称:" prop="name"><iInput v-model="formData.name"></iInput></iFormItem><iFormItem label="邮箱:" prop="mail"><iInput v-model="formData.mail"></iInput></iFormItem><button @click="handleSubmit">提交</button><button @click="handleReset">重置</button></iForm></div>
</template><script>
// @ is an alias to /src
import iForm from '@/components/form/form.vue'
import iFormItem from '@/components/form/formItem.vue'
import iInput from '@/components/input.vue'export default {name: 'home',components: { iForm, iFormItem, iInput },data() {return {formData: { name: '', mail: '' },rules: {name: [{ required: true, message: '不能为空', trigger: 'blur'}],mail: [{ required: true, message: '不能为空', trigger: 'blur'},{ type: 'email', message: '邮箱格式不正确', trigger: 'blur'}]}}},methods: {handleSubmit() {this.$refs.form.validate((valid) => {if (valid) console.log('提交成功');else console.log('校验失败');})},handleReset() { this.$refs.form.resetFields() }}
}
</script>
到此,Form
组件的基本功能就已经完成,虽然,只是简单的几个表单控件,但其已经实现检验和提示功能。
实例代码: https://github.com/zhengjunxiang/vue-form
结语
通过自己封装组件可以对 Vue.js 的组件来进一步加深理解,如 provide / inject 和 dispatch 通信方法的使用场景。对以后的开发有不小帮助。
手把手教你用Vue.js封装Form组件相关推荐
- 基于vue element-ui 封装上传图片组件 功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
学习目标: 我们在开发后台时肯定避免不了上传图片的功能 例如: 上传图片回显 上传完成 : 预览查看 , 删除等 如果是图片列表,还可能让你拖动图片排序 有的后台项目可能要给图片添加水印,添加标记 有 ...
- vue使用html渲染组件,Vue.js在渲染组件之前填充数据
我是Vue.js的新手,我试图创建一个没有成功的简单组件,它包含一个selectList,我试图填充它的选项数据来模拟Ajax请求,这是我的代码:Vue.js在渲染组件之前填充数据 HTML {{n. ...
- 动态添加组件_使用vue.js的动态组件模板
最近刚做完建站工具,准备总结里面使用到的一些技巧,同时会做一版简化的放在 github上. 先来一篇翻译的文章,和我在项目中使用的动态组件思路一样,不过缺少了演化的过程,直接给出了最终的解决方案.这篇 ...
- vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...
- vue图片裁剪组件_使用Vue-Rx的Vue.js图像裁剪组件
vue图片裁剪组件 Vuejs夹 (vuejs-clipper) Vue.js image clipping components using Vue-Rx. 使用Vue-Rx的Vue.js图像裁剪组 ...
- 手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】
???作者:bug菌 博客:CSDN.掘金等 ??公众号:猿圈奇妙屋 ??特别声明:原创不易,转载请附上原文出处链接和本文声明,谢谢配合. ??版权声明:文章里可能部分文字或者图片来源于互联网或者百度 ...
- vue超详细教程,手把手教你完成vue项目
Vue 一. Vue简介 Vue是于2013年(与React框架同年发布)推出的一个渐进式.自底向上的前端框架,它的作者叫尤雨溪.那么什么叫做渐进式框架呢?比较官方的说法就是:以Vue内核作为核心 ...
- cli3暴露api地址 vue_手把手教你开发 Vue 组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完 从0到1教你搭建前端团队的组件系统 之后很多朋友希望了解一下如何搭建基于vue的组件系统,所以作为这篇文 ...
- pls-00302: 必须声明 组件_手把手教你开发vue组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完 从0到1教你搭建前端团队的组件系统 之后很多朋友希望了解一下如何搭建基于vue的组件系统,所以作为这篇文 ...
最新文章
- python装饰器函数-python3 函数:函数装饰器
- 银行应用_讲解人脸识别在银行的应用
- SecureCRT登陆Centos 6.4乱码问题
- android手机连接PC后怎样切换为U 盘模式
- 马恩驰:R向量化运算
- mysql字段类型解析_MySQL数据类型之数字类型详细解析
- 自己试着在阿里云布了个服务器
- 电视还有前途吗?也许它的前途就是嫁给互联网
- 苹果4s怎么越狱_unc0ver 越狱工具来袭,免电脑操作,支持 A7-A12,支持iOS11~iOS12.4稳定越狱...
- btsync多客户端同步的设置
- 过去一年对我帮助最大的三本书
- 怎样将pdf文件页面旋转
- 计算机怎么取消脱敏设置,脸过敏如何治疗 脸部快速脱敏的妙招
- Elasticsearch通过_update_by_query和script批量修改文档
- android中进程间通信的几种方式
- 女人啊!你的名字叫坚强
- 北航2020计算机学院招生,北航网络空间安全学院接收2020推免研究生复试成绩公示及相关说明...
- Axure RP 基础元件
- 特别的生日礼物推荐-男女朋友最想要的礼物-节日礼物送长辈
- snpEff : 突变位点注释的又一利器