做一个通用型组件，一个很重要的原则是：高内聚，低耦合。简单来说呢，就是让它最小单位化，最好只做一件事。
要学习源码，先要学会怎么看别人的源码，所以做之前，我先去喵了下element开源库相关内容，今天所模拟的内容就在：
https://github.com/ElemeFE/element/tree/dev/packages/form
基本上，element的组件源码都放在packages这个目录下
我们往往是从最小组件写起，也就是最里层的input, 先实现input里的双向绑定v-model：
- 绑定一个value值，用来接收父组件的传值
- 监听input事件，实时监测输入值的改变，但是要注意vue的单向数据流，不要在子组件里修改父组件里的传值，而是要抛事件出去，给v-model接收
- 新建index.vue，试验输入用户名时，能看到model.username的值跟着变，没毛病，继续
<!-- EInput -->
<template>
<div>
<input :type="type" :value="value" @input="onInput">
{{model.username}}
</div>
</template>
<script>
export default {
name: 'eInput',
components:{},
props: {
value: {
type: String,
default: ''
},
type: {
type: String,
default: 'text'
}
},
methods: {
onInput(e) {
console.log(e.target.value);
// 实现v-model
this.$emit("input", e.target.value)
}
}
}
</script>
<!-- index.vue -->
<template>
<div>
<EInput v-model="model.username"/>
</div>
</template>
<script>
import EInput from './EInput.vue'
export default {
name: 'EleForms',
components:{
EInput
},
data() {
return {
model: {
username: '',
password: ''
}
}
}
}
</script>
实现Form
- 接收model数据和校验规则rules，并将其传给后代组件，这里是通过provide实现的，element将整个实例this传递给了后代
- 放个插槽，方便自定义内容，比如FormItem
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
name: 'EForm',
provide() {
return {
// 这里参照element的源码，直接将整个实例传递给孙子节点，以防止以后额外添加的属性，也是为了避免在每个item都要把rules传递一次
form: this
}
},
props: {
model: {
type: Object,
require: true
},
rules: {
type: Object
}
}
}
</script>
实现Form-Item
写之前，我们先了解async-validator这个校验库，一会会用到，这里简单介绍下（具体可以参考：https://www.npmjs.com/package/async-validator）：
- 要先创建一个校验规则description, 它是一个对象， key为要验证的属性，值为它的验证规则，结构其实跟我们传的rules是一样的：
// 可以理解为一个单一的rules
const desc = rules = {
username: [{
required: true, message: '请输入用户名'
}]
}
- 使用校验规则创建一个校验对象
js var validate = new AsyncValidate(desc) - 调用校验对象上的校验方法
// validate是AsyncValidate的一个内置方法，参数：1. source（要校验的对象）， 2. options（一些配置项，非必须），3. 回调函数，默认参数为errors
validate.validate({username: [username的值]}, errors => {
// 校验不通过
if(errors) {
console.log(errors)
}else {
// 校验通过
console.log("ok!")
}
})
开始实现Form-Item
- 里边设置一个插槽，方便在里头放表单控件，比如上面那个EInput组件
- 接收父祖件的label标签和要校验的prop值，此两值都非必填项
- 实现表单验证功能
- 接收父祖件传递的 model数据和 rules验证规则
- 使用async-validator库实现校验功能，将传递的rules, prop, model结合进行校验
说那么多，不如上代码:
<!-- EFormItem.vue -->
<template>
<div>
<!-- label可能没有，所以要做下判断 -->
<label v-if="label">{{label + "："}}</label>
<slot></slot>
<!-- 显示校验的错误信息 -->
<span v-if="error" class="error-tip">{{error}}</span>
</div>
</template>
<script>
import AsyncValidator from 'async-validator'
export default {
name: 'EFormItem',
components:{},
inject: ['form'],
data() {
return {
error: ''
}
},
props: {
label: {
type: String,
default: ''
},
prop: {
type: String
}
},
mounted() {
},
methods: {
// 因为是表单，会有个全校验的操作，所以是批量检验的
validate() {
// 使用inject，将EFORM组件的实例（form）接收，通过this.form获取父组件，从而拿到父祖件的model和rules
const model = this.form.model
const rules = this.form.rules
// // 如何实现校验呢，撸一眼源码，发现它用了个异步检验库 async-validator，撸它！
// 创建校验规则
const key = this.prop // 要校验的属性，由传入的prop决定
const value = model[key] // 要校验的属性的值
const desc = {
[key]: rules[key]
}
const validate = new AsyncValidator(desc) // 使用校验规则，创建一个校验对象
// 这里可以看到valideate方法的返回值是一个Promise，所以这里可以将结果返回，以便后续操作
return validate.validate({ [key]: value }, (errors, fields) => {
if(errors) {
console.log('errors:', errors);
this.error = errors[0].message
}else{
this.error = ''
}
})
}
}
}
</script>
<style scoped>
.error-tip {
display: inline-block;
color: red;
}
</style>
- 补充下EInput组件，在输入值改变时，给其添加调用调用父组件的验证方法
// EInput.vue
methods: {
onInput(e) {
this.$emit("input", e.target.value)
// 在输入值改变时，触发父组件EFormItem的校验方法
this.$parent.validate()
}
}
- 改下index.vue，把这三都串一串使用, 试验下，没问题，那么大致的基础功能都实现了
<!-- index.vue -->
<template>
<div>
<EForm :model="model" :rules="rules">
<EFormItem label="用户名" prop="username">
<EInput v-model="model.username" placeholder="请输入用户名"/>
</EFormItem>
<EFormItem label="密码" prop="password">
<EInput v-model="model.password" placeholder="请输入密码"/>
</EFormItem>
</EForm>
</div>
</template>
<script>
import EInput from './EInput.vue'
import EFormItem from './EFormItem.vue'
import EForm from './EForm.vue'
export default {
name: 'EleForms',
components:{
EInput,
EFormItem,
EForm
},
data() {
return {
model: {
username: '',
password: ''
},
rules: {
username: [{ required: 'true', message: '用户名不能为空'}],
password: [{ required: 'true', message: '密码不能为空'}],
}
}
}
}
</script>
处理提交全部校验功能
看下element的表单，它其实不只是单个表单控件会在输入完成后做校验，在提交时，也会有个全部校验的功能，而这个功能是挂载在EForm这个元素上的。我们来模拟实现功能。
// 官网示例
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
分析一下：
- 全局校验这个方法是挂载在Form表单上的，所以要在EForm这个组件里，添加一个全局校验方法validate，它的参数是一个回调函数，
- 在整合三个组件的入口，要添加一提交按钮，点击后触发EForm组件的validate
<!-- index.vue -->
<template>
<div>
<EForm :model="model" :rules="rules" ref="eform">
<EFormItem label="用户名" prop="username">
<EInput v-model="model.username" placeholder="请输入用户名"/>
</EFormItem>
<EFormItem label="密码" prop="password">
<EInput v-model="model.password" placeholder="请输入密码"/>
</EFormItem>
<!-- 添加提交按钮 -->
<EFormItem>
<button @click="submit('eform')">提交</button>
</EFormItem>
</EForm>
</div>
</template>
<script>
import EInput from './EInput.vue'
import EFormItem from './EFormItem.vue'
import EForm from './EForm.vue'
export default {
name: 'EleForms',
components:{
EInput,
EFormItem,
EForm
},
data() {
return {
model: {
username: '',
password: ''
},
rules: {
username: [{ required: 'true', message: '用户名不能为空'}],
password: [{ required: 'true', message: '密码不能为空'}],
}
}
},
methods: {
// 添加一个提交事件，用来触发EForm表单里的全局校验
submit(formName) {
this.$refs[formName].validate(valid => {
console.log('valid:', valid);
if(valid) {
alert("ok")
}else {
console.log('校验不通过');
}:
})
}
}
}
</script>
// EForm.vue
methods: {
validate(cb) {
// 这里会报错，因为有些元素是没有prop属性的，所以没法进行校验，要对其进行排除
// const tasks = this.$children.map(item => item.validate())
const tasks = this.$children.filter(item => item.prop).map(item => item.validate())
// validate返回的是一个promise，所以可以使用Promise.all来处理所有回调
console.log('tasks:', tasks); // [Promise, Promise]
Promise.all(tasks)
.then(() => cb(true))
.catch(() => cab(false))
},
}
