阅读 982

手把手教你用Vue.js封装Form组件

在日常使用vue开发WEB项目中,经常会有提交表单的需求,会使用其他的库来使用,但我们往往忽略了其中的实现逻辑,如果想深入了解其中的实现细节,本文章从0到1,手把手教你封装一个属于自己的Form组件!

Form 组件概览

表单类组件有多种,比如输入框(Input)、单选(Radio)、多选(Checkbox)等。在使用表单时,也会经常用到数据校验,如果每次都写校验程序来对每一个表单的输入值进行校验,会很低效,因此需要一个能够校验基础表单控件的组件,也就是本节要完成的Form 组件。
Form 组件分为两个部分,一个是外层的Form 表单域组件,一组表单控件只有一个Form,而内部包含了多个FormItem 组件,每一个表单控件都被一个FormItem 包裹。基本的结构看起来像:

<iForm ref="form" :model="formData" :rules="rules">
   <iFormItem label="名称:" prop="name">
       <iInput v-model="formData.name" ></iInput>
   </iFormItem>
   <iFormItem label="邮箱:" prop="mail">
       <iInput v-model="formData.mail"></iInput>
   </iFormItem>
   <button @click="handleSubmit">提交</button>
   <button @click="handleReset">重置</button>
</iForm> 
复制代码

Form 需要有输入校验,并在对应的 FormItem 中给出校验提示,校验我们会用到一个开源库:async-validator。使用规则大概如下:

[
  { required: true, message: '不能为空', trigger: 'blur' },
  { type: 'email', message: '格式不正确', trigger: 'blur' }
]
复制代码
`required`表示必填项,`message`表示校验失败时的提示信息,`trigger`表示触发校验的条件,它的值有`blur`和`change`表示失去焦点和正在输入时进行校验。如果第一条满足要求,再进行第二条的验证,`type`表示校验类型,值为`email`表示校验输入值为邮箱格式,还支持自定义校验规则。更详细的用法可以参看它的文档。

初始化项目

使用 Vue CLI 3 创建项目(具体使用可以查看官方文档),同时下载 async-validator 库。

初始化项目完项目后,在 src/components 下新建一个form 文件夹,并初始化两个组件 form.vueformItem.vue和一个input.vue,同时可以按照自己的想法配置路由。初始完项目后src下的项目录如下:

./src
├── App.vue
├── assets
│   └── logo.png
├── components
│   ├── form
│   │   ├── form.vue
│   │   └── formItem.vue
│   └── input.vue
├── main.js
├── mixins
│   └── emitter.js
├── router.js
└── views
    └── Form.vue
复制代码

接口实现

组件的接口来自三个部分:propsslotseventsFormFormItem 两个组件用来做输入数据校验,用不到 eventsFormslot 就是一系列的 FormItemFormItemslot 就是具体的表单如: <iInput>

Form 组件中,定义两个 props

  • model:表单控件绑定的数据对象,在校验或重置时会访问该数据对象对应数据,类型为Object
  • rules:表单校验规则,即上面介绍的 async-validator 所使用的校验规则,类型为Object

FormItem 组件中,也定义两个props

  • label:单个表单组件的标签文本,类似原生的 <label>元素,类型为String
  • prop:对应表单域Form 组件model 里的字段,用于在校验或重置时访问表单组件绑定的数据,类型为String

定义完后,调用页面的代码如下

<template>
  <div class="home">
    <h3>Form (校验表单)</h3>
    <iForm ref="form" :model="formData" :rules="rules">
      <iFormItem label="名称:" prop="name">
        <iInput v-model="formData.name"></iInput>
      </iFormItem>
      <iFormItem label="邮箱:" prop="mail">
        <iInput v-model="formData.mail"></iInput>
      </iFormItem>
    </iForm>
  </div>
</template>

<script>
// @ is an alias to /src
import iForm from '@/components/form/form.vue'
import iFormItem from '@/components/form/formItem.vue'
import iInput from '@/components/input.vue'

export default {
  name: 'home',
  components: { iForm, iFormItem, iInput },
  data() {
    return {
      formData: { name: '', mail: '' },
      rules: {
        name: [{ required: true, message: '不能为空', trigger: 'blur'}],
        mail: [
          { required: true, message: '不能为空', trigger: 'blur'},
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
        ]
      }
    }
  }
}
</script>
复制代码

代码中的 iFormiFormItemiInput组件的实现细节将在后边的内容涉及。

到此,iFormiFormItem 组件的代码如下:

<!-- ./src/components/form/form.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'iForm',
  data() {
    return { fields: [] }
  },
  props: {
    model: { type: Object },
    rules: { type: Object }
  },
  created() {
    this.$on('form-add', field => {
      if (field) this.fields.push(field);
    });
    this.$on('form-remove', field => {
      if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);
    })
  }
}
</script>

<!-- ./src/components/form/formItem.vue -->
<template>
  <div>
    <label v-if="label">{{ label }}</label>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'iFormItem',
  props: {
    label: { type: String, default: '' },
    prop: { type: String }
  }
}
</script>
复制代码

iForm 组件中设置了 fields 数组来保存组件中的表单实例,方便接下来获取表单实例来判断各个表单的校验情况;
并在 created 生命周期中就绑定两个监听事件 form-addform-remove 用于添加和移除表单实例。

接下来就是实现刚才提到绑定事件 ,但在实现之前我们要设想下,我们要怎么调用绑定事件这个方法?
在 Vue.js 1.x 版本,有this.$dispatch 方法来绑定自定义事件,但在 Vue.js 2.x 里废弃了。但我们可以实现一个类似的方法,调用方式为 this.dispatch 少了 <div 来于之前的旧 API 做区分。 我们可以把该方法单独写到 emitter.js文件中,然后通过组件中的mixins方式引用,达到代码复用。在src中创建文件夹mixins然后在其中创建emitter.js`,具体代码如下:

<!-- ./src/mixins/emitter.js -->
export default {
  methods: {
    dispatch(componentName, eventName, params) {
      let parent = this.$parent || this.$root;
      let 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));
    }
  }
}
复制代码

可以看到该 dispatch 方法通过遍历组件的 $parent.name 来和传入的参数 componentName 做对比,当找到目标父组件时就通过调用父组件的 $emit 来触发参数 eventName 对应的绑定事件。

接下来在 formItem.vue 中通过 mixins 引入 dispatch 方法,实现触发绑定事件 form-addform-remove, 代码如下:

<!-- ./src/components/form/formItem.vue -->
<template>
  <div>
    <label v-if="label">{{ label }}</label>
    <slot></slot>
  </div>
</template>
<script>
import Emitter from '@/mixins/emitter.js';
export default {
  name: 'iFormItem',
  mixins: [ Emitter ],
  props: {
    label: { type: String, default: '' },
    prop: { type: String }
  },
  mounted() {
    if (this.prop) {
      this.dispatch('iForm', 'form-add', this);
    }
  },
  // 组件销毁前,将实例从 Form 的缓存中移除
  beforeDestroy () {
    this.dispatch('iForm', 'form-remove', this);
  },
}
</script>
复制代码

接下来是实现 formItem.vue 的输入数据校验功能,在校验是首先需要知道校验的规则,所以我们先要拿到 Form.vue 中的 rules 对象。

  • Form.vuerules 对象通过 props 传给 iForm 组件,那么我们可以在 iForm 组件中通过 provide 的方式导出该组件实例,让子组件可以获取到其 props 中的 rules 对象;
  • 子组件 formItem 可以通过 inject 的方式注入需要访问的实例;

此时代码如下:

<!-- ./src/components/form/form.vue -->
...
export default {
  name: 'iForm',
  data() {
    return { fields: [] }
  },
  props: {
    model: { type: Object },
    rules: { type: Object }
  },
  provide() {
    return { form: this }
  },
  created() {
    this.$on('form-add', field => {
      if (field) this.fields.push(field);
    });
    this.$on('form-remove', field => {
      if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);
    })
  }
}
</script>
复制代码
<!-- ./src/components/form/formItem.vue -->
...
import Emitter from '@/mixins/emitter.js';
export default {
  name: 'iFormItem',
  mixins: [ Emitter ],
  inject: [ 'form' ],
  props: {
    label: { type: String, default: '' },
    prop: { type: String }
  },
  mounted() {
    if (this.prop) {
      this.dispatch('iForm', 'form-add', this);
    }
  },
  // 组件销毁前,将实例从 Form 的缓存中移除
  beforeDestroy () {
    this.dispatch('iForm', 'form-remove', this);
  },
}
</script>
复制代码

现在在 formItem 中就可以通过 this.form.rules 来获取到规则对象了;
有了规则对象以后,就可以设置具体的校验方法了;

  • setRules: 设置具体需要监听的事件,并触发校验;
  • getRules:获取该表单对应的校验规则;
  • getFilteredRule:过滤出符合要求的 rule 规则;
  • validate:具体的校验过程;
    ...

具体代码如下:

<!-- ./src/components/form/formItem.vue -->
<template>
  <div>
    <label :for="labelFor" v-if="label" :class="{'label-required': isRequired}">{{label}}</label>
    <slot></slot>
    <div v-if="isShowMes" class="message">{{message}}</div>
  </div>
</template>
<script>
import AsyncValidator from 'async-validator';
import Emitter from '@/mixins/emitter.js';
export default {
  name: 'iFormItem',
  mixins: [ Emitter ],
  inject: [ 'form' ],
  props: {
    label: { type: String, default: '' },
    prop: { type: String }
  },
  data() {
    return {
      isRequired: false, isShowMes: false, message: '', labelFor: 'input' + new Date().valueOf()
    }
  },
  mounted() {
    if (this.prop) {
      this.dispatch('iForm', 'form-add', this);
      // 设置初始值
      this.initialValue = this.fieldValue;
      this.setRules();
    }
  },
  // 组件销毁前,将实例从 Form 的缓存中移除
  beforeDestroy () {
    this.dispatch('iForm', 'form-remove', this);
  },
  computed: {
    fieldValue() {
      return this.form.model[this.prop]
    }
  },
  methods: {
    setRules() {
      let rules = this.getRules();
      if (rules.length) {
        rules.forEach(rule => {
          if (rule.required !== undefined) this.isRequired = rule.required
        });
      }
      this.$on('form-blur', this.onFieldBlur);
      this.$on('form-change', this.onFieldChange);
    },
    getRules() {
      let formRules = this.form.rules;
      formRules = formRules ? formRules[this.prop] : [];
      return formRules;
    },
    // 过滤出符合要求的 rule 规则
    getFilteredRule (trigger) {
      const rules = this.getRules();
      return rules.filter(rule => !rule.trigger || rule.trigger.indexOf(trigger) !== -1);
    },
    /**
     * 校验表单数据
     * @param trigger 触发校验类型
     * @param callback 回调函数
     */
    validate(trigger, cb) {
      let rules = this.getFilteredRule(trigger);
      if(!rules || rules.length === 0) return true;
      // 使用 async-validator
      const validator = new AsyncValidator({ [this.prop]: rules });
      let model = {[this.prop]: this.fieldValue}; 
      validator.validate(model, { firstFields: true }, errors => {
        this.isShowMes = errors ? true : false;
        this.message = errors ? errors[0].message : '';
        if (cb) cb(this.message);
      })
    },
    resetField () {
      this.message = '';
      this.form.model[this.prop] = this.initialValue;
    },
    onFieldBlur() {
      this.validate('blur');
    },
    onFieldChange() {
      this.validate('change');
    }
  }
}
</script>
<style>
  .label-required:before {
    content: '*';
    color: red;
  }
  .message {
    font-size: 12px;
    color: red;
  }
</style>
复制代码

注意:这次除了增加了具体的校验方法外,还有错误提示信息的显示逻辑 <label> 标签的 for 属性设置;到此,formItem 组件完成。

有了 formItem 组件我们就可以用它了包裹 input 组件:

  • input 组件中通过 @input@blur 这两个事件来触发 formItem 组件的 form-changeform-blur 的监听方法。需要特别注意:在 handleInput 中需要调用 this.$emit('input', value) ,把 input 中输入的 value 传给在实例调用页面中的 formData ,代码如下:
  • // 省略部分代码
    <template>
      <div class="home">
        <h3>Form (校验表单)</h3>
        <iForm ref="form" :model="formData" :rules="rules">
          <iFormItem label="名称:" prop="name">
            <iInput v-model="formData.name"></iInput>
          </iFormItem>
          <iFormItem label="邮箱:" prop="mail">
            <iInput v-model="formData.mail"></iInput>
          </iFormItem>
        </iForm>
      </div>
    </template>
    
    <script>
    // @ is an alias to /src
    import iForm from '@/components/form/form.vue'
    import iFormItem from '@/components/form/formItem.vue'
    import iInput from '@/components/input.vue'
    // formData中的数据通过v-model的方试进行绑定,
    // 在 input 组件中调用 this.$emit('input', value) 把数据传给 formData
    export default {
      name: 'home',
      components: { iForm, iFormItem, iInput },
      data() {
        return {
          formData: { name: '', mail: '' }
        }
      }
    }
    </script>
    复制代码

并在组件中 watch 其输入的 value 值,赋值给 input 组件;

实现代码如下:

<!-- ./src/components/input.vue -->
<template>
  <div>
    <input ref="input" :type="type" :value="currentValue" @input="handleInput" @blur="handleBlur" />
  </div>
</template>
<script>
import Emitter from '@/mixins/emitter.js';
export default {
  name: 'iInput',
  mixins: [ Emitter ],
  props: {
    type: { type: String, default: 'text'},
    value: { type: String, default: ''}
  },
  watch: {
    value(value) {
      this.currentValue = value
    }
  },
  data() {
    return { currentValue: this.value, id: this.label }
  },
  mounted () {
    if (this.$parent.labelFor) this.$refs.input.id = this.$parent.labelFor;
  },
  methods: {
    handleInput(e) {
      const value = e.target.value;
      this.currentValue = value;
      this.$emit('input', value);
      this.dispatch('iFormItem', 'form-change', value);
    },
    handleBlur() {
      this.dispatch('iFormItem', 'form-blur', this.currentValue);
    }
  }
}
</script>
复制代码

input 组件到此就完成,现在我们可以接着在 form 组件实现表单提交时,校验所有表单,和重置所用表单的功能了:

<!-- ./src/components/form/form.vue -->
<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'iForm',
  data() {
    return { fields: [] }
  },
  props: {
    model: { type: Object },
    rules: { type: Object }
  },
  provide() {
    return { form: this }
  },
  methods: {
    resetFields() {
      this.fields.forEach(field => field.resetField())
    },
    validate(cb) {
      return new Promise(resolve => {
        let valid = true, count = 0;
        this.fields.forEach(field => {
          field.validate('', error => {
            if (error) valid = false;
            if (++count === this.fields.length) {
              resolve(valid);
              if (typeof cb === 'function') cb(valid);
            }
          })
        })
      })
    }
  },
  created() {
    this.$on('form-add', field => {
      if (field) this.fields.push(field);
    });
    this.$on('form-remove', field => {
      if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);
    })
  }
}
</script>
复制代码
  • validate: 获取所有表单的校验结果,并做对应逻辑处理;
  • resetFields: 重置所有表单;

现在让我们回到最初的调用页面 ./src/views/Form.vue 下,添加两个按钮,分别用于提交表单和重置表单:

<!-- ./src/views/Form.vue -->
<template>
  <div class="home">
    <h3>Form (校验表单)</h3>
    <iForm ref="form" :model="formData" :rules="rules">
      <iFormItem label="名称:" prop="name">
        <iInput v-model="formData.name"></iInput>
      </iFormItem>
      <iFormItem label="邮箱:" prop="mail">
        <iInput v-model="formData.mail"></iInput>
      </iFormItem>
      <button @click="handleSubmit">提交</button>
      <button @click="handleReset">重置</button>
    </iForm>
  </div>
</template>

<script>
// @ is an alias to /src
import iForm from '@/components/form/form.vue'
import iFormItem from '@/components/form/formItem.vue'
import iInput from '@/components/input.vue'

export default {
  name: 'home',
  components: { iForm, iFormItem, iInput },
  data() {
    return {
      formData: { name: '', mail: '' },
      rules: {
        name: [{ required: true, message: '不能为空', trigger: 'blur'}],
        mail: [
          { required: true, message: '不能为空', trigger: 'blur'},
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid)  console.log('提交成功');
        else console.log('校验失败');
      })
    },
    handleReset() { this.$refs.form.resetFields() }
  }
}
</script>
复制代码

到此,Form 组件的基本功能就已经完成,虽然,只是简单的几个表单控件,但其已经实现检验和提示功能。

实例代码:

github.com/yokeney/vue…

文章分类
前端
文章标签