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

<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>

<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 lang="less"></style>

<template>
 <div class="formItem-wrapper">
 <div class="content">
 <label v-if="label" :style="{ width: labelWidth }">{{ label }}：</label>
 <slot></slot>
 </div>
 <p v-if="errorMessage" class="errorStyle">{{ 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 lang="less">
@labelWidth: 90px;

.formItem-wrapper {
 padding-bottom: 10px;
}
.content {
 display: flex;
}
.errorStyle {
 font-size: 12px;
 color: red;
 margin: 0;
 padding-left: @labelWidth;
}
</style>

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

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

<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>

<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>

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

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

<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>