element from表单 input框 二次封装

1. 当我们 需要多个 input 框校验时 cv 太麻烦 逻辑不清晰 重复 数据 太多 结构 太复杂
2. Vue input框 二次封装 思想，逻辑 如下：
3. 干货满满

   	/**
   	* 表单校验 为 失去焦点  和 change 事件、
   	* 首选我们需要知道  el - form 中的属性 都有哪些 
   	* model 官网网描述太过于抽象 个人理解为最终生成 	数据的 Object 对象 
   	*  rules 这个里边是 所有的 校验规则  在 动态 from 表单上面 我们 会用 到 但是 这里只是 单 input 框 所有 就不用这个 rules 属性 
   	*  在这里 单 input 封装 用不到 别的属性 这里就不一一介绍
   	* /
   	
   	/**
   	*  el-form-item 中的属性 label 标题 
   	*  rules  校验 规则 
   	*  prop 对应的校验规则名字
   	*/
   	
   	/**
   	* input 框
   	* placeholder 提示
   	* disabled 禁用 
   	*  clearable 清空 
   	* show-password 显示隐藏的密码框
   	* 可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标， 也可以通过 slot 来放置图标。
   	* 等等 不 一一介绍  
   	*/
   

   • 子组件

	<template>
  <div>
    <el-form :model="formData" ref="formModel">
     <el-form-item
        v-for="(item,key) in opts"
        :key="item.lable"
        :prop="key"
        :rules="item.rules"
        :label="item.label"
      > 
        <el-input
          v-model="formData[key]"
          :placeholder="item.pl"
          :disabled="item.dis"
          :maxlenght="item.max"
          :minlenght="item.min"
          :type="item.type"
        ></el-input>
      </el-form-item>     
    </el-form>
  </div>
</template>
<script>

// 深拷贝
import { deepClone } from '../../uilts/deepClone/deepClone';
export default {
  name:'myform',
  props: {
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formModel: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {};
  },
  watch: {
    formData:{
        handler(newVal,odlVal){
            console.log(newVal,odlVal);
        }
    }
  },
  created(){
    console.log(this);
  },
  methods: {},
  computed: {
    opts() {
      let opt = deepClone(this.formModel);
      for (const key in opt) {
        const objVal = opt[key];
        // console.log(objVal);
        console.log(key);
        // console.log('aaa', objVal);
        objVal.pl = objVal.pl ?? `请${objVal.state}你的${objVal.label}`;
        objVal.type = objVal.type ?? '';
        objVal.tag = objVal.tag ?? 'input';
        objVal.label = objVal.label ?? `传值lable不能为空`;
        objVal.prop = objVal.prop ?? ``;
        objVal.max = objVal.max ?? 6;
        objVal.min = objVal.min ?? 3;
        objVal.dis = objVal.dis ?? false;
        objVal.reg = objVal.reg ?? false;
        for (const item of objVal.rules) {
        // 判断是否必填
        if(item.required){
            item.message = item.message ?? `${objVal.label}不能为空`
            item.trigger = 'blur'
        }
        console.log(item);
        }
      }
      return opt;
    }
  }
};
</script>

• 父组件

	<template>
 <div class="home">
   <my-form :formModel="formModel" :formDtat="formDtat"></my-form>
 </div>
</template>

<script>
import myForm from '../components/xm-form.vue';
export default {
 name: 'Home',
 data() {
   return {
     formDtat:{},
     formModel:{
       username:{
         label:'用户名',
         type:'input',
         state:'输入',
         rules:[
           {required:true},
         ]
       },
       password:{
         label:'密码',
         type:'password',
         state:'输入',
         rules:[{required:true},
         { validator: (rule, value, callback) => {
           if(!/^[a-zA-Z]\w{5,17}$/.test(value)){
             console.log(/^[a-zA-Z]\w{5,17}$/.test(value));
             return callback(new Error('密码不正确'));
           }
           callback()
           console.log('aaa',rule,callback);
         },trigger:'change' | blur },
         ]
       }
     }
   };
 },
 methods:{},
 components:{
   myForm
 }
};
</script>