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

 3667

这篇文章主要给大家介绍了关于Vue模仿ElementUIform表单的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

实现要求

模仿 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 组件实现:

<template>
    <div>
        <input :value="value" @input="onInput" v-bind="$attrs" />
    </div>
</template>
<script>
export default {
    inheritAttrs: false, // 避免顶层容器继承属性
    props: {
        value: {
            type: String,
            default: ""
        }
    },
    data() {
        return {};
    },
    methods: {
        onInput(e) {
            // 通知父组件数值发生变化
            this.$emit("input", e.target.value);
 
            // 通知 FormItem 执行校验
            // 这种写法不健壮,因为 Input 组件和 FormItem 组件之间可能会隔代
            this.$parent.$emit("validate");
        }
    }
};
</script>
<style scoped></style>

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

CheckBox 组件

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

CheckBox 组件实现:

<template>
    <section>
        <input type="checkbox" :checked="checked" @change="onChange" />
    </section>
</template>
<script>
export default {
    props: {
        checked: {
            type: Boolean,
            default: false
        }
    },
    model: {
        prop: "checked",
        event: "change"
    },
    methods: {
        onChange(e) {
            this.$emit("change", e.target.checked);
            this.$parent.$emit("validate");
        }
    }
};
</script>
<style scoped></style>

FormItem 组件

具体实现如下:

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

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

3、监听校验事件,并执行校验(使用 async-validator 插件进行校验)。

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

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

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

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

FormItem 组件实现:

<template>
    <div>
        <div>
            <label v-if="label" :style="{ width: labelWidth }">{{ label }}:</label>
            <slot></slot>
        </div>
        <p v-if="errorMessage">{{ errorMessage }}</p>
    </div>
</template>
<script>
import Schema from "async-validator";
export default {
    inject: ["formModel"],
    props: {
        label: {
            type: String,
            default: ""
        },
        prop: String
    },
    data() {
        return {
            errorMessage: "",
            labelWidth: this.formModel.labelWidth
        };
    },
    mounted() {
        // 监听校验事件,并执行校验
        this.$on("validate", () => {
            this.validate();
        });
    },
    methods: {
        validate() {
            // 执行组件的校验
            // 1、获取数据
            const values = this.formModel.model[this.prop];
            // 2、获取校验规则
            const rules = this.formModel.rules[this.prop];
            // 3、执行校验
            const schema = new Schema({
                [this.prop]: rules
            });
            // 参数1是值,餐数2是校验错误对象数组
            // validate 返回的是 Promise<Boolean>
            return schema.validate({ [this.prop]: values }, errors => {
                if (errors) {
                    this.errorMessage = errors[0].message;
                } else {
                    this.errorMessage = "";
                }
            });
        }
    }
};
</script>
<style scoped>
@labelWidth: 90px;
.formItem-wrapper {
    padding-bottom: 10px;
}
.content {
    display: flex;
}
.errorStyle {
    font-size: 12px;
    color: red;
    margin: 0;
    padding-left: @labelWidth;
}
</style>

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

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

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

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

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

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

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

Form 组件

具体实现如下:

1、给 FormItem 组件预留插槽。

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

3、执行全局校验

Form 组件实现:

<template>
    <div>
        <slot></slot>
    </div>
</template>
<script>
export default {
    provide() {
        return {
            formModel: this // 传递 Form 实例给后代,比如 FormItem 用来获取校验的数据和规则
        };
    },
    props: {
        model: {
            type: Object,
            required: true
        },
        rules: {
            type: Object
        },
        labelWidth: String
    },
    data() {
        return {};
    },
    methods: {
        validate(cb) {
            // 执行全局校验
            // map 结果是若干 Promise 数组
            const tasks = this.$children.filter(item => item.prop).map(item => item.validate());
            // 所有任务必须全部校验成功才算校验通过
            Promise.all(tasks)
            .then(() => {
                cb(true);
            })
            .catch(() => {
                cb(false);
            });
        }
    }
};
</script>
<style scoped></style>

我们在 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 组件实现:

<template>
    <div>
        <Form :model="formModel" :rules="rules" ref="loginForm" label-width="90px">
            <FormItem label="用户名" prop="username">
                <Input v-model="formModel.username"></Input>
            </FormItem>
            <FormItem label="密码" prop="password">
                <Input type="password" v-model="formModel.password"></Input>
            </FormItem>
            <FormItem label="记住密码" prop="remember">
                <CheckBox v-model="formModel.remember"></CheckBox>
            </FormItem>
            <FormItem>
                <button @click="onLogin">登录</button>
            </FormItem>
        </Form>
    </div>
</template>
<script>
import Input from "@/components/form/Input";
import CheckBox from '@/components/form/CheckBox'
import FormItem from "@/components/form/FormItem";
import Form from "@/components/form/Form";
export default {
    data() {
        const validateName = (rule, value, callback) => {
            if (!value) {
                callback(new Error("用户名不能为空"));
            } else if (value !== "admin") {
                callback(new Error("用户名错误 - admin"));
            } else {
                callback();
            }
        };
        const validatePass = (rule, value, callback) => {
            if (!value) {
                callback(false);
            } else {
                callback();
            }
        };
        return {
            formModel: {
                username: "",
                password: "",
                remember: false
            },
            rules: {
                username: [{ required: true, validator: validateName }],
                password: [{ required: true, message: "密码必填" }],
                remember: [{ required: true, message: "记住密码必选", validator: validatePass }]
            }
        };
    },
    methods: {
        onLogin() {
            this.$refs.loginForm.validate(isValid => {
                if (isValid) {
                    alert("登录成功");
                } else {
                    alert("登录失败");
                }
            });
        }
    },
    components: {
        Input,
        CheckBox,
        FormItem,
        Form
    }
};
</script>
<style scoped></style>

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

在上面我们还留了一个小尾巴~,就是在 Input 组件中通知父组件执行校验,目前使用的是 this.$parent.$emit(),这样写有一个弊端,就是当 Input 组件和 FormItem 组件之后隔代的时候,再使用 this.$parent 获取不到 FormItem 组件。

我们可以封装一个 dispatch 方法,主要实现向上循环查找父元素并且派发事件,代码实现如下:

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

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

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

修改 Input 组件:

<template>
    <div>
        <input :value="value" @input="onInput" v-bind="$attrs" />
    </div>
</template>
<script>
import emmiter from "@/mixins/emmiter";
export default {
    inheritAttrs: false, // 避免顶层容器继承属性
    mixins: [emmiter],
    props: {
        value: {
            type: String,
            default: ""
        }
    },
    data() {
        return {};
    },
    methods: {
        onInput(e) {
            // 通知父组件数值发生变化
            this.$emit("input", e.target.value);
 
            // 通知 FormItem 执行校验
            // 这种写法不健壮,因为 Input 组件和 FormItem 组件之间可能会隔代
            // this.$parent.$emit("validate");
 
            this.dispatch("validate"); // 使用 mixin 中 emmiter 的 dispatch,解决跨级问题
        }
    }
};
</script>
<style scoped></style>


本文网址:https://www.zztuku.com/index.php/detail-8731.html
站长图库 - Vue模仿ElementUI的form表单实例代码
申明:如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐