【前端】没有了element时，怎么实现一个自己的form表单组件和表单校验（用法参考el-form）

需求

平时用习惯了el-form做表单校验，等到做小程序是，不能用element了很不习惯，准备自己手撸一个form表单组件做平替。

代码

form.vue

<template><div class="cwx-form" ref="myForm"><slot></slot></div>
</template><script>
export default {props: {model: {type: Object,default: () => { return {} }}},data() {return {requires: {}}},methods: {validate() {let flag = true;function isEmpty(value) {// 判断空字符串if (typeof value === 'string' && value.trim().length === 0) {return true;}// 判断空值（null 或 undefined）if (value === null || typeof value === 'undefined') {return true;}// 判断空数组if (Array.isArray(value) && value.length === 0) {return true;}return false;}const findFormItems = (children) => {children.forEach((child) => {if (child.$options.name === 'formItem' && child.require) {//找到需要校验的字段if (isEmpty(this.model[child.prop])) {//如果为空值 需要处理child.warning=trueflag=false}else{//如果校验通过，需要恢复child.warning=false}}if (child.$children) {findFormItems(child.$children);}});};findFormItems(this.$children || []);return flag}}
}
</script><style></style>

formItem.vue

<template><view class="cwx-form-item" :class="{'warning':warning}"><span class="label"><span v-if="prefix" class="prefix">{{ prefix }}</span><span v-if="require" class="red">*</span>{{ label }}<span v-if="tip" class="tip">{{ tip }}</span></span><slot></slot></view>
</template><script>
export default {name: 'formItem',props:{label:{type: String,default:''},require:{type: Boolean,default: false,},prop:{type: String,default:''},tip: {type: String,default: ''},prefix: {type: String,default: ''},},data(){return{warning: false,}}
}
</script><style lang="scss" scoped>
.cwx-form-item{// padding: 0 32rpx;min-height: 78rpx;
}
.label{font-size: 28rpx;line-height: 28rpx;color: $uni-text-color;line-height: 78rpx;.red{color: #F53F3F;}.tip {font-size: 24rpx;margin-left: 16rpx;color: #ABB0AF;}.prefix {color: #ABB0AF;}
}
.warning{// background: rgba(244, 137, 137, 0.12);
}
</style>

使用

<MyForm class="repair-img" ref="form" :model="form"><div style="padding: 0 32rpx"><MyFormItem label="维修后图片：" prop="afterfileList" require tip="图片大小不超过5MB"><file-uploadclass="file-upload":disabled="isDetail":fileList="form.afterfileList"@change="(arr)=>{form.afterfileList = arr}"/></MyFormItem></div></MyForm>