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

使用组件就像流水线上的工人；设计组件就像设计流水线的人，设计好了给工人使用。

完整项目地址：仿 ElementtUI 实现一个 Form 表单

一. 目标

仿 ElementUI 实现一个简单的 Form 表单，主要实现以下四点：

我们先看一下 ElementUI 中 Form 表单的基本用法

<el-form :model="ruleForm" :rules="rules" ref="loginForm">     <el-form-item label="用户名" prop="name">    	<el-input v-model="ruleForm.name"></el-input>   </el-form-item>     <el-form-item label="密码" prop="pwd">    	<el-input v-model="ruleForm.pwd"></el-input>   </el-form-item>     <el-form-item>    	<el-button type="primary" @click="submitForm('loginForm')">登录</el-button>   </el-form-item>  </el-form>

在 ElementUI 的表单中，主要进行了 3 层嵌套关系， Form 是最外面一层， FormItem 是中间一层，最内层是 Input 或者 Button 。

二. 创建项目

我们通过 Vue CLI 3.x 创建项目。

使用 vue create e-form 创建一个目录。

使用 npm run serve 启动项目。

三. Form 组件设计

ElementUI 中的表单叫做 el-form ，我们设计的表单就叫 e-form 。

为了实现 e-form 表单，我们参考 ElementUI 的表单用法，总结出以下我们需要设计的功能。

1. Input 的设计

我们首先观察一下 ElementUI 中的 Input 组件：

<el-input v-model="ruleForm.name"></el-input>

在上面的代码中，我们发现 input 标签可以实现一个双向数据绑定，而实现双向数据绑定需要我们在 input 标签上做两件事。

当我们完成这两件事以后，我们就可以完成一个 v-model 的语法糖了。

我们创建一个 Input.vue 文件：

<template> <div>  <!-- 1. 绑定 value   		 2. 响应 input 事件		-->  <input type="text" :value="valueInInput" @input="handleInput"> </div></template><script>export default { name: "EInput", props: {  value: { // 解释一   type: String,   default: '',  } }, data() {  return {   valueInInput: this.value // 解释二  }; }, methods: {   handleInput(event) {     this.valueInInput = event.target.value; // 解释三    	this.$emit('input', this.valueInInput); // 解释四   } },};</script>

我们对上面的代码做一点解释：