Element-UI的表单组件实现原理

梦里梦外; 2022-10-02 12:47 197阅读 0赞

可以去Element-UI官网引用里面的很多组件  
https://element.eleme.cn/\#/zh-CN/component/form  
一个Element-Ui的小demo代码如下:

<template>
      <div>
        <el-form :model = 'model' :rules = 'rules' :ref = 'loginForm'>
           <el-form-item lable = '用户名' prop = 'username'>
               <el-input v-model = 'model.username' autocomplete = 'off'></el-input>
           </el-form-item>
           <el-form-item lable = '用户密码' prop = 'password'>
              <el-input type = 'password' v-model = 'model.password' autocpmplete = 'off'></el-input>
           </el-form-item>
           <el-form-item>
                <el-button type = 'primary' @click = 'submitForm("loginForm")'>提交</el-button>
           </el-form-item>
        </el-form>
      </div>
    </template>
    <script>
      export default {
         data() {
           return {
             model:{username:'',password:''},
             rules:{
               username:[{required:true,message:'请输入用户名'}],
               password:[{required:true,message:'请输入密码'}]
             }
           }
         },
         methods:{
           submitForm(form) {
             this.$refs[form].validata(valid => {
               if(valid) {
                 alert('请求登录')
               }else {
                 alert('校验失败')
               }
             })
           }
         }
      }
    </script>

*  其中Form管理数据模型、校验规则
 *  FormItem显示lable、执行校验和显示校验结果
 *  Input绑定数据模型，通知FormItem执行校验

根据上面的三个小模块就有了三个需要知道的问题：  
**1、自定义组件：**  
实现自定义组件双绑需要 指定:value和@input即可，并且还需要通知父组件  
**2、实现自定义的el-form组件**

<template>
       <form>
         <slot></slot>
       </form>
    </template>
    <script>
       export default {
         provide() {
           return {
              form:this
           }
         },
         methods:{
            validate(cb) {
            //执行所有的FormItem的方法
              const tasks = this.$children
              .filter(v => v.prop)
              .map(item => item.validate())
    
              Promise.all(tasks)
              .then(() => cb(true))
              .catch(() => cb(false))
            }
         }
       }
    </script>

**3、实现自定义的el-form-item组件**

//FormItem要实现的任务
    //预留插槽，扩展input;能够展示lable和校验的错误信息；能够进行校验
    
    <template>
      <div>
        <lable v-if = 'lable'>
            {
       {lable}}
        </lable>
        <slot></slot>
        <p v-if = 'error' style = 'color:red'>
            {
       {error}}
        </p>
      </div>
    </template>
    <script>
       import Schema from 'async-validator'
      export default {
        props:['lable','prop'],
        //能够获取全局的规则
        inject:['form'],
        data() {
          return {
            error:''
          }
        },
        methods:{
          mounted() {
            this.$on('validate',this.validate)
          },
          validate() {
            //每个item都有一个validata方法
          //1、获取rule校验规则
          const rules = this.form.rules[this.prop]
          //2、获取model数据模型
          const value = this.form.model[this.prop]
          let descriptor = {
             [this.prop]:rules
          };
          const schema = new Schema(descriptor)
          return schema.validate({
             [this.prop]:value
          },errors => {
            if(errors) {
               this.error = errors[0].message
            }else {
               this.error = ''
            }
          })
          }
        }
      }
    </script>

**4、实现自定义的el-input组件**

<template>
       <div>
          <input :type = 'type' :blur = 'onBlur' :value = 'value' @input = 'onInput' />
       </div>
    </template>
    <script>
      //失去焦点时触发校验以及用户输入的时候触发校验
      export default {
         props:{
             type:{
               type:String,
               default:'text'
             },
             value:{
               type:String,
               default:''
             }
         },
         methods:{
           onInput(e) {
             this.$emit('input',e.target.value);
             this.$parent.$emit("validate")
           },
           onBlur() {
             this.$dispatch('validate')
           }
         }
      }
    </script>

5、最后在接口文件App.vue中使用

<template>
      <div class = 'app2'>
        <de_form :model = 'model' :rules = 'rules' :ref = 'loginForm'>
           <de_formitem lable = '用户名' prop = 'username'>
               <de_input v-model = 'model.username'></de_input>
           </de_formitem>
           <de_formitem lable = '用户密码' prop = 'password'>
              <de_input type = 'password' v-model = 'model.password'></de_input>
           </de_formitem>
           <de_formitem>
                <el-button type = 'primary' @click = 'submitForm("loginForm")'>提交</el-button>
           </de_formitem>
        </de_form>
      </div>
    </template>
    <script>
       import de_formitem from './components/de-FormItem'
       import de_input from './components/de-input'
       import de_form from './components/de-form'
       export default {
         components:{
           de_formitem,
           de_input
         },
         data() {
           return {
             name:'',
             model:{username:'',password:''},
             rules:{
               username:[{required:true,message:'请输入用户名'}],
               password:[{required:true,message:'请输入密码'}]
             }
           }
         },
         methods:{
           submitForm(formName) {
               this.$refs[formName].validate(valid => {
                  if(valid) {
                    alert('校验成功')
                  }else {
                    alert('校验失败')
                  }
               })
           }
         }
       }
    </script>