仿iview实现自定义form组件

思路：拆分为三个组件：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