华山资源网

仿ElementUI实现一个Form表单的实现代码
网络编程 2024/11/17 佚名
3 1

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

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

一. 目标

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

  • Form
  • FormItem
  • Input
  • 表单验证

我们先看一下 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 的表单用法，总结出以下我们需要设计的功能。

  • e-form 负责全局校验，并提供插槽；
  • e-form-item 负责单一项校验及显示错误信息，并提供插槽；
  • e-input 负责数据双向绑定；

1. Input 的设计

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

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

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

  • 要绑定 value
  • 要响应 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>

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

**解释一：**既然我们想做一个 Input 组件，那么接收的值必然是父组件传进来的，并且当父组件没有传进来值的时候，我们可以它一个默认值 "" 。

**解释二：**我们在设计组件的时候，要遵循单向数据流的原则：父组件传进来的值，我们只能用，不能改。那么将父组件传进来的值进行一个赋值操作，赋值给 Input 组件内部的 valueInInput ，如果这个值发生变动，我们就修改内部的值 valueInInput 。这样我们既可以处理数据的变动，又不会直接修改父组件传进来的值。

**解释三：**当 Input 中的值发生变动时，触发 @input 事件，此时我们通过 event.target.value 获取到变化后的值，将它重新赋值给内部的 valueInInput 。

**解释四：**完成了内部赋值之后，我们需要做的就是将变化后的值通知父组件，这里我们用 this.$emit 向上派发事件。其中第一个参数为事件名，第二个参数为变化的值。

完成了以上四步，一个实现了双向数据绑定的简单的 Input 组件就设计完成了。此时我们可以在 App.vue 中引入 Input 组件观察一下结果。

<template>
 <div id="app">
  <e-input v-model="initValue"></e-input>
  <div>{{ initValue }}</div>
 </div>
</template>

<script>
import EInput from './components/Input.vue';

export default {
 name: "app",
 components: {
  EInput
 },
 data() {
  return {
   initValue: '223',
  };
 },
};
</script>

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

2. FormItem 的设计

<el-form-item label="用户名" prop="name">
		<el-input v-model="ruleForm.name"></el-input>
</el-form-item>

在 ElementUI 的 formItem 中，我们可以看到：

  1. 需要 label 来显示名称；
  2. 需要 prop 来校验当前项；
  3. 需要给 input 或 button 预留插槽；

根据上面的需求，我们可以创建出自己的 formItem ，新建一个 FormItem.vue 文件 。

<template>
  <div>
    <!-- 解释一 -->
    <label v-if="label">{{ label }}</label>
    <div>
      <!-- 解释二 -->
      <slot></slot>
      <!-- 解释三 -->
      <p v-if="validateState === 'error'" class="error">{{ validateMessage }}</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "EFormItem",
    props: {
   			label: { type: String, default: '' },
   			prop: { type: String, default: '' }
 			},
    data() {
      return {
        validateState: '',
        validateMessage: ''
      }
    },
  }
</script>

<style scoped>
.error {
  color: red;
}
</style>

和上面一样，我们接着对上面的代码进行一些解释：

**解释一：**根据 ElementUI 中的用法，我们知道 label 是父组件传来，且当传入时我们展示，不传入时不展示。

解释二： slot 是一个预留的槽位，我们可以在其中放入 input 或其他组件、元素。

解释三： p 标签是用来展示错误信息的，如果验证状态为 error 时，就显示。

此时，我们的 FormItem 组件也可以使用了。同样，我们在 App.vue 中引入该组件。

<template>
 <div id="app">
  
  <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>
  
  <div>
   {{ ruleForm }}
  </div>
  
 </div>
</template>

<script>
import EInput from './components/Input.vue';
import EFormItem from './components/FormItem.vue';

export default {
 name: "app",
 components: {
  EInput,
  EFormItem
 },
 data() {
  return {
   ruleForm: {
    name: '',
    pwd: '',
   },
  };
 },
};
</script>

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

3. Form 的设计

到现在，我们已经完成了最内部的 input 以及中间层的 FormItem 的设计，现在我们开始设计最外层的 Form 组件。

当层级过多并且组件间需要进行数据传递时，Vue 为我们提供了 provide 和 inject API，方便我们跨层级传递数据。

我们举个例子来简单实现一下 provide 和 inject 。在 App.vue 中，我们提供数据(provide)。

export default {
 name: "app",
 provide() {
  return {
   msg: '哥是最外层提供的数据'
  }
 }
};
</script>

接着，我们在最内层的 Input.vue 中注入数据，观察结果。

<template>
 <div>
  <!-- 1、绑定 value 
  2、响应 input 事件-->
  <input type="text" :value="valueInInput" @input="handleInput">
  <div>{{ msg }}</div>
 </div>
</template>

<script>
export default {
 name: "EInput",
 inject: [ 'msg' ],
 props: {
  value: {
   type: String,
   default: '',
  }
 },
 data() {
  return {
   valueInInput: this.value
  };
 },
 methods: {
   handleInput(event) {
     this.valueInInput = event.target.value;
    	this.$emit('input', this.valueInInput);
   }
 },
};
</script>

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

根据上图，我们可以看到无论跨越多少层级， provide 和 inject 可以非常方便的实现数据的传递。

理解了上面的知识点后，我们可以开始设计 Form 组件了。

<el-form :model="ruleForm" :rules="rules" ref="loginForm">
	
</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实现一个Form表单的实现代码

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

4. 设计校验规则

在上面设计的组件中，我们知道校验当前项和展示错误信息的工作是在 FormItem 组件中，但是数据的变化是在 Input 组件中，所以 FormItem 和 Input 组件是有数据传递的。当 Input 中的数据变化时，要告诉 FormItem ，让 FormItem 进行校验，并展示错误。

首先，我们修改一下 Input 组件：

methods: {
  handlerInput(event) {
   this.valueInInput = event.target.value;
   this.$emit("input", this.valueInInput);
   
   // 数据变了，定向通知 FormItem 校验
   this.dispatch('EFormItem', 'validate', this.valueInput);
  },
		// 查找指定 name 的组件，
  dispatch(componentName, eventName, params) {
   var parent = this.$parent || this.$root;
   var name = parent.$options.name;

   while (parent && (!name || name !== componentName)) {
    parent = parent.$parent;

    if (parent) {
     name = parent.$options.name;
    }
   }
   if (parent) {
    parent.$emit.apply(parent, [eventName].concat(params));
   }
  }
 }

这里，我们不能用 this.$emit 直接派发事件，因为在 FormItem 组件中， Input 组件的位置只是一个插槽，无法做事件监听，所以此时我们让 FormItem 自己派发事件，并自己监听。修改 FormItem 组件，在 created 中监听该事件。

created() {
	this.$on('validate', this.validate);
}

当 Input 组件中的数据变化时， FormItem 组件监听到 validate 事件后，执行 validate 函数。

下面，我们就要处理我们的 validate 函数了。而在 ElementUI 中，验证用到了一个底层库async-validator，我们可以通过 npm 安装这个包。

npm i async-validator

async-validator 是一个可以对数据进行异步校验的库，具体的用法可以参考上面的链接。我们通过这个库来完成我们的 validate 函数。继续看 FormItem.vue 这个文件：

<template>
 <div>
  <label v-if="label">{{ label }}</label>
  <div>
   <slot></slot>
   <p v-if="validateState === 'error' " class="error">{{ validateMessage }}</p>
  </div>
 </div>
</template>

<script>
import AsyncValidator from "async-validator";

export default {
 name: "EFormItem",
 props: {
			label: { type: String, default: '' },
			prop: { type: String, default: '' }
 },
 inject: ["eForm"], // 解释一
 created() {
  this.$on("validate", this.validate);
 },
 mounted() { // 解释二
  if (this.prop) { // 解释三
   this.dispatch('EForm', 'addFiled', this);
  }
 },
 data() {
  return {
   validateMessage: "",
   validateState: ""
  };
 },
 methods: {
  validate() {
    // 解释四
   return new Promise(resolve => {
    // 解释五
    const descriptor = {
     // name: this.form.rules.name =>
     // name: [ { require: true }, { ... } ]
    };
    descriptor[this.prop] = this.eForm.rules[this.prop];
    // 校验器
    const validator = new AsyncValidator(descriptor);
    const model = {};
    model[this.prop] = this.eForm.model[this.prop];
    // 异步校验
    validator.validate(model, errors => {
     if (errors) {
      this.validateState = "error";
      this.validateMessage = errors[0].message;

      resolve(false);
     } else {
      this.validateState = "";
      this.validateMessage = "";

      resolve(true);
     }
    });
   });
  }，
  // 查找上级指定名称的组件
  dispatch(componentName, eventName, params) {
   var parent = this.$parent || this.$root;
   var name = parent.$options.name;

   while (parent && (!name || name !== componentName)) {
    parent = parent.$parent;

    if (parent) {
     name = parent.$options.name;
    }
   }
   if (parent) {
    parent.$emit.apply(parent, [eventName].concat(params));
   }
  }
 }
};
</script>

<style scoped>
.error {
 color: red;
}
</style>

我们对上面的代码做一个解释。

解释一：注入 Form 组件提供的数据 - Form 组件的实例，下面就可以使用 this.eForm.xxx 来使用 Form 中的数据了。

解释二：因为我们需要在 Form 组件中校验所有的 FormItem ，所以当 FormItem 挂载完成后，需要派发一个事件告诉 Form ：你可以校验我了。

解释三：当 FormItem 中有 prop 属性的时候才校验，没有的时候不校验。比如提交按钮就不需要校验。

<e-form-item>
		<input type="submit" @click="submitForm()" value="提交">
</e-form-item>

**解释四：**返回一个 promise 对象，批量处理所有异步校验的结果。

解释五： descriptor 对象是 async-validator 的用法，采用键值对的形式，用来检查当前项。比如：

// 检查当前项
// async-validator 给出的例子
name: {
		type: "string",
		required: true,
		validator: (rule, value) => value === 'muji',
}

FormItem 中检查当前项完成了，现在我们需要处理一下 Form 组件中的全局校验。表单提交时，需要对 form 进行一个全局校验。大致的思路是：循环遍历表单中的所有派发上来的 FormItem ，让每一个 FormItem 执行自己的校验函数，如果有一个为 false ，则校验不通过；否则，校验通过。我们通过代码实现一下：

<template>
 <form>
  <slot></slot>
 </form>
</template>

<script>
  export default {
    props: {
      model: { type: Object, required: true },
      rules: { type: Object }
    },
    provide() {
     return {
       eForm: this, // provide this component's instance
     } 
    },
	   data() {
      return {
        fileds: [],
      }
    },
    created() {
      // 解释一
     	this.fileds = [];
      this.$on('addFiled', filed => this.fileds.push(filed));
    },
    methods: {
      async validate(cb) { // 解释二
        // 解释三
        const eachFiledResultArray = this.fileds.map(filed => filed.validate());

        // 解释四
        const results = await Promise.all(eachFiledResultArray);
        let ret = true;
        results.forEach(valid => {
          if (!valid) {
            ret = false;
          }
        });
        cb(ret);
      }
    },
  }
</script>

<style lang="scss" scoped>
</style>

解释一：用 fileds 缓存需要校验的表单项，因为我们在 FormItem 中派发了事件。只有需要校验的 FormItem 会被派发到这里，而且都会保存在数组中。

if (this.prop) {
   this.dispatch('EForm', 'addFiled', this);
}

解释二：当点击提交按钮时，会触发这个事件。

解释三：遍历所有被添加到 fileds 中的 FormItem 项，让每一项单独去验证，会返回 Promise 的 true 或 false 。将所有的结果，放在一个数组 eachFiledResultArray 中。

解释四：获取所有的结果，统一进行处理，其中有一个结果为 false ，验证就不能通过。

至此，一个最简化版本的仿 ElementUI 的表单就实现了。

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

四. 总结

当然上面的代码还有很多可以优化的地方，比如说 dispatch 函数，我们可以写一遍，使用的时候用 mixin 导入。由于篇幅关系，这里就不做处理了。

通过这次实现，我们首先总结一下其中所涉及的知识点。

  • 父组件传递给子组件用 props
  • 子组件派发事件，用 $emit
  • 跨层级数据交互，用 provide 和 inject
  • 用 slot 可以预留插槽

其次是一些思想：

  • 单项数据流：父组件传递给子组件的值，子组件内部只能用，不能修改。
  • 组件内部的 name 属性，可以通过 this.$parent.$options.name 查找。
  • 想要批量处理很多异步的结果，可以用 promise 对象。

最后，文章会首先发布在我的 Github ，以及公众号上，欢迎关注，欢迎 star。

 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com