如何封装一个带表单验证的 Vue的表单插件（二）：功能开发

接下来，我们开始完整的功能开发

目录结构

整体目录结构如上图所示

• src/components 项目的业务组件/页面
• src/base form表单组件
• src/mixins 混入相关的内容放在这个文件夹（dispatch、capture方法）

form表单之 input组件

首先我们先看看input.vue文件的内容：

<template>
  <input :type="type" :placeholder="placeholder" :value="currentValue" @input="inputChange">
</template>
<script>
import Emitter from '@/mixins/emitter'
export default {
  mixins: [Emitter],
  name: 'w-input',
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    }
  },
  data () {
    return {
      currentValue: this.value
    }
  },
  methods: {
   inputBlur () {
      this.dispatch('form-item', 'on-input-blur', this.currentValue)
    },
    inputChange (e) {
      this.currentValue = e.target.value
      this.$emit('input', this.currentValue)
      // 如果单需要在输入事件input的时候就开始校验 增加下面语句
      this.dispatch('form-item', 'on-input-input', this.currentValue)
    }
  }
}

我们的稍作分析：

• props我们接受三个属性 value(输入框的值)、 type(input的type值，可配password、email等)、placeholder(占位内容)
• data里面定义一个currentValue，默认值为props中传入的value，之所以要定义这个值，是因为不能直接修改props中的值，所以输入框的value我们用currentValue填充
• methods里面有两个事件 输入框的input事件（实时更新数据，添加表单校验的触发事件）和blur事件（添加表单校验的触发事件）
  this.$emit('input', this.currentValue) 这句代码是自定义组件使用v-model双向数据绑定的语法，不了解的小伙伴可以查看Vue的官方文档 自定义组件上面使用v-model 或者我自己写的 v-model详解

form表单之 form-item组件

接下来我们查看 form-item组件代码：

<template>
  <di