仿ElementUI实现一个Form表单的实现代码

</el-form>

根据 ElementUI 中表单的用法，我们知道

Form

组件需要实现以下功能：

提供数据模型 model；
提供校验规则 rules；
提供槽位，里面放我们的 FormItem 等组件；

根据上面的需求，我们创建一个 Form.vue 组件：

<template>
  <form>
    <slot></slot>
  </form>
</template>
<script>
  export default {
    name: 'EForm',
    props: { // 解释一
      model: {
        type: Object,
        required: true
      },
      rules: {
        type: Object
      }
    },
    provide() { // 解释二
      return {
        eForm: this // 解释三
      }
    }
  }
</script>

解释一：该组件需要用户传递进来一个数据模型

model

进来，类型为

Object

。

rules

为可传项。

解释二：为了让各个层级都能使用

Form

中的数据，需要依靠

provide

函数提供数据。

解释三：直接将组件的实例传递下去。

完成了

Form

组件的设计，我们在 App.vue 中使用一下：

<template>
 <div id="app">
  <e-form :model="ruleForm" :rules="rules">
   <e-form-item label="用户名" prop="name">
    <e-input v-model="ruleForm.name"></e-input>
   </e-form-item>
   <e-form-item label="密码" prop="pwd">
    <e-input v-model="ruleForm.pwd"></e-input>
   </e-form-item>
   <e-form-item>
    <button>提交</button>
   </e-form-item>
 </e-form>
 </div>
</template>
<script>
import EInput from './components/Input.vue';
import EFormItem from './components/FormItem.vue';
import EForm from "./components/Form";
export default {
 name: "app",
 components: {
  EInput,
  EFormItem,
  EForm
 },
 data() {
  return {
   ruleForm: {
    name: '',
    pwd: '',
   },
   rules: {
    name: [{ required: true }],
    pwd: [{ required: true }]   },
  };
 },
};
</script>

到目前为止，我们的基本功能就已经实现了，除了提交与验证规则外，所有的组件几乎与 ElementUI 中的表单一模一样了。下面我们就开始实现校验功能。