element form表单的简单实现

element form表单

Form 表单 | Element Plus

源码地址：

GitHub - ElemeFE/element: A Vue.js 2.0 UI Toolkit for Web

 想要实现上图的表单我们只需要引入element-ui的form表单，按照表单的传参要求，就可以实现上图的效果

<template>
  <el-form
    ref="ruleForm"
    :model="ruleForm"
    :rules="rules"
    label-width="100px"
  >
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="ruleForm.name" placeholder="请输入活动名称" />
    </el-form-item>
    <el-form-item label="活动区域" prop="region">
      <el-input v-model="ruleForm.region" placeholder="请输入活动区域" />
    </el-form-item>
    <el-form-item style="text-align: right">
      <el-button @click="resetForm('ruleForm')">重置</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts">
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        region: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    submitForm(formName:any) {
      (this.$refs[formName]as any).validate((valid:any) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

接下来我们就来简单的实现下上面的form组件，下面的代码只是让你对form有个大概的了解，如果需要详细知道内部是怎么实现的，可以去看下源码。

首先我们需要实现el-input数据间的双向绑定

<template>
  <div>
    <input :value="value" @input="inputChange">
  </div>
</template>

<script>

export default {
    props: { 
        // 接收父组件的值
        value: {
            type: String,
            default: ''
        }
    }
    // 将子组件值传给父组件
    inputChange(e: any) {
        this.$emit('input', e.target.value)
    }
    // 通知父级校验数据
    this.$parent.$emit('validate')
}
</script>

然后我们需要看下el-form-item里面都做了什么，展示label和输入框以及报错信息

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

<script>
import AsyncValidator from 'async-validator';
export default {
    // 实现祖先和后代之间通信
    inject: ['form']
    props: { 
        // 标签
        label: {
            type: String,
            default: ''
        },
        // 字段名
        prop: {
            type: String,
            default: '' 
        }
    }
    mounted(){
        this.$on('validate',()=>{ this.validate() })
    }
    methods:{
        validate(){
            // 获取对应的FormItem校验规则
            const rules = this.form.rules[this.prop]
            // 获取校验的值
            const value = this.form.model[this.prop]
            // 创建校验器
            const descriptor = {}
            descriptor[this.prop] = rules;
            const validator = new AsyncValidator(descriptor);
            return validator.validate({[this.prop]:value}, errors=>{
              if(errors){
                // 将错误信息显示
                this.error = errors[0].message
              }else{
                // 校验通过
                this.error = ''
              }
           })
        }
    }
}
</script>

最后简单来看下el-form里面的实现

<template>
  <form>
    <solt/>
  </div>
</template>
<script>
export default {
    // 实现祖先和后代之间通信
    provide(){
        return {
            form: this
        }
    }
    props: { 
        // 标签
        model: {
            type: Object
        },
        // 字段名
        rules: {
            type: Object
        }
    }
    methods:{
        // this.$refs[formName].validate((valid:any) => {})
        // 上面方法的简单实现
        validate(cb){
            const tasks = this.$children.filter(item=>item.prop)
                                        .map(item=>item.validate())
            Promise.all(task).then(()=>cb(true)).catch(()=>cb(false))
        }
    }
}
</script>