element from表单 input框 二次封装

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-itemv-for="(item,key) in opts":key="item.lable":prop="key":rules="item.rules":label="item.label"> <el-inputv-model="formData[key]":placeholder="item.pl":disabled="item.dis":maxlenght="item.max":minlenght="item.min":type=&#pe"></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}`;pe = pe ?? '';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;for (const item of objVal.rules) {// 判断是否必填quired){ssage = ssage ?? `${objVal.label}不能为空&#igger = '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>