思路：拆分为三个组件：Form、FormItem、Input（后续可进行扩展）
-
Form：表单功能，配置校验规则，并可触发子组件的校验和重置（后续可继续封装） -
FormItem：展示label，且根据属性props判断是否需校验 -
Input：原生input，当兼听到input时，上报，实现双向绑定并触发校验
- 表单的使用
// login组件
<template>
<ele-form class="login-form" ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<ele-form-item label="用户名" prop="username">
<ele-input :value="formValidate.username" @input="input($event, 'username')" placeholder="请输入用户名"></ele-input>
</ele-form-item>
<ele-form-item label="密码" prop="password">
<ele-input :value="formValidate.password" @input="input($event, 'password')" type="password" placeholder="请输入密码"></ele-input>
</ele-form-item>
<ele-form-item>
<button type="primary" @click="handleSubmit('formValidate')">提交</button>
<button @click="handleReset('formValidate')">重置</button>
</ele-form-item>
</ele-form>
</template>
<script>
import eleForm from "@/components/form/ele-form/ele-form"
import eleFormItem from '@/components/form/ele-form-item/ele-form-item'
import eleInput from '@/components/form/ele-input/ele-input'
export default {
components: {
eleForm,
eleFormItem,
eleInput
},
data() {
return {
formValidate: {
username: '',
password: ''
},
ruleValidate: {
username: [{ required: true, message: '请输入用户名', trigger: 'change' }],
password: [{ required: true, message: '请输入密码', trigger: 'change' }]
}
}
},
mounted() {
},
methods: {
input(value, type) {
this.formValidate[type] = value
},
handleSubmit(name) {
this.$refs[name].validate(valid => {
console.log(valid)
});
},
handleReset(name) {
this.$refs[name].resetFields();
}
}
}
</script>
-
form组件：- 给
form-item预留槽位 - 将数据传递给后代便于它们访问数据模型和校验规则
- 给
// ele-form
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
// 一个对象，或者是一个返回对象的函数。里面包含要给子孙后代的东西，也就是属性和属性值
provide() {
return {
// 表单实例
form: this
}
},
props: {
// 表单数据对象
model: {
type: Object, required: true, default: () => {}
},
// 表单验证规则
rules: {
type: Object, default: () => {}
},
// 表单域标签的宽度，所有的 FormItem 都会继承 Form 组件的 label-width 的值
'label-width': {
type: Number, default: 100
}
},
data() {
return {
}
},
methods: {
async validate(callback) {
const tasks = this.$children.filter(item => item.prop).map(item => item.validate())
const results = await Promise.all(tasks)
if (results.some(valid => !valid)) {
// 校验失败
callback(false)
} else {
// 校验成功
callback(true)
}
},
resetFields() {
const tasks = this.$children.filter(item => item.prop)
tasks.forEach(item => {
item.errorMessage = ''
item.form.model[item.prop] = ''
})
}
},
}
</script>
-
formItem组件：- 任务1：给Input预留插槽 - slot
- 任务2：展示label和校验信息
- 任务3：进行校验
// ele-form-item
<template>
<div :class="{'form-item': true, 'form-item-error': errorMessage}">
<label :class="{'has-label': label}">{{label}}</label>
<div class="form-content">
<div class="row">
<slot></slot>
</div>
<div v-if="errorMessage" class="error">{{errorMessage}}</div>
</div>
</div>
</template>
<script>
import Validator from 'async-validator'
import { Promise } from 'q'
export default {
// 一个字符串数组，或者是一个对象
inject: [ 'form' ],
props: {
label: {
type: String,
default: ''
},
prop: {
type: String,
default: ''
}
},
data() {
return {
errorMessage: ''
}
},
created() {
this.$on('validate', this.validate)
},
methods: {
validate() {
return new Promise(resolve => {
// 制定校验规则
const descriptor = { [this.prop]: this.form.rules[this.prop] }
// 创建校验器
const validator = new Validator(descriptor)
// 执行校验
validator.validate(
descriptor,
errors => {
console.log(errors, this.form.model[this.prop])
if (errors && errors.length) {
this.errorMessage = errors[0].message
resolve(false)
} else {
this.errorMessage = ''
resolve(true)
}
}
)
})
}
},
}
</script>
-
input组件：- 任务1：实现自定义组件双向绑定功能，v-model是语法糖，实现自定义组件双绑需要指定:value和@input
- 任务2：值发生变化时通知Form组件实现双向绑定，并且通知FormItem组件触发校验
<template>
<input class="ipt" :type="type" :value="value" @input="onInput">
</template>
<script>
export default {
props: {
type: {
type: String,
default: 'text'
},
value: {
type: String,
default: ''
}
},
data() {
return {
}
},
methods: {
// 当数据发生变化时
onInput(event) {
// 通知父组件，实现双向绑定
this.$emit('input', event.target.value)
// 通知 FormItem 执行校验
this.$parent.$emit('validate')
}
}
}
</script>
遗留问题：async-validator会报错XXX is not a string
