jnpf-app-vue3/uni_modules/vk-uview-ui/components/u-form/u-form.vue

<template>
	<view class="u-form">
		<slot />
	</view>
</template>

<script>
	/**
	 * form 表单
	 * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
	 * @tutorial https://vkuviewdoc.fsq.pub/components/form.html
	 * @property {Object} model 表单数据对象
	 * @property {Boolean} border-bottom 是否显示表单域的下划线边框
	 * @property {String} label-position 表单域提示文字的位置，left-左侧，top-上方
	 * @property {String Number} label-width 提示文字的宽度，单位rpx（默认90）
	 * @property {Object} label-style lable的样式，对象形式
	 * @property {String} label-align lable的对齐方式
	 * @property {Object} rules 通过ref设置，见官网说明
	 * @property {Array} error-type 错误的提示方式，数组形式，见上方说明(默认['message'])
	 * @example <u-form :model="form" ref="uForm"></u-form>
	 */

	export default {
		name: 'u-form',
		props: {
			// 当前form的需要验证字段的集合
			model: {
				type: Object,
				default () {
					return {};
				}
			},
			// 验证规则
			// rules: {
			// 	type: [Object, Function, Array],
			// 	default() {
			// 		return {};
			// 	}
			// },
			// 有错误时的提示方式，message-提示信息，border-如果input设置了边框，变成呈红色，
			// border-bottom-下边框呈现红色，none-无提示
			errorType: {
				type: Array,
				default () {
					return ['message', 'toast']
				}
			},
			// 是否显示表单域的下划线边框
			borderBottom: {
				type: Boolean,
				default: true
			},
			// label的位置，left-左边，top-上边
			labelPosition: {
				type: String,
				default: 'left'
			},
			// label的宽度，单位rpx
			labelWidth: {
				type: [String, Number],
				default: 90
			},
			// lable字体的对齐方式
			labelAlign: {
				type: String,
				default: 'left'
			},
			// lable的样式，对象形式
			labelStyle: {
				type: Object,
				default () {
					return {}
				}
			},
			// 表单内所有input的inputAlign属性的值
			inputAlign: {
				type: String,
				default: 'left'
			},
			// 表单内所有input的clearable属性的值
			clearable: {
				type: Boolean,
				default: true
			}
		},
		provide() {
			return {
				uForm: this
			};
		},
		data() {
			return {
				rules: {}
			};
		},
		created() {
			// 存储当前form下的所有u-form-item的实例
			// 不能定义在data中，否则微信小程序会造成循环引用而报错
			this.fields = [];
		},
		methods: {
			setRules(rules) {
				this.rules = rules;
			},
			// 清空所有u-form-item组件的内容，本质上是调用了u-form-item组件中的resetField()方法
			resetFields() {
				this.fields.map(field => {
					field.resetField();
				});
			},
			// 校验全部数据
			validate(callback) {
				return new Promise(resolve => {
					// 对所有的u-form-item进行校验
					let valid = true; // 默认通过
					let count = 0; // 用于标记是否检查完毕
					let errorArr = []; // 存放错误信息
					let errorObjArr = []; // 存放错误信息对象
					if (!this.fields.length || typeof callback != 'function') return callback(valid);
					this.fields.map(field => {
						// 调用每一个u-form-item实例的validation的校验方法
						field.validation('', (errorMsg, errObj) => {
							// 如果任意一个u-form-item校验不通过，就意味着整个表单不通过
							if (errorMsg) {
								valid = false;
								errorArr.push(errorMsg);
								errorObjArr.push(errObj)
							}

							// 当历遍了所有的u-form-item时，调用promise的then方法
							if (++count === this.fields.length) {

								resolve(valid, errorObjArr[0]); // 进入promise的then方法
								// 判断是否设置了toast的提示方式，只提示最前面的表单域的第一个错误信息
								if (this.errorType.indexOf('none') === -1 && this.errorType
									.indexOf('toast') >= 0 && errorArr.length) {
									this.$u.toast(errorArr[0]);
								}
								// 调用回调方法
								if (typeof callback == 'function') callback(valid, errorObjArr[0]);
							}
						});
					});
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	@import "../../libs/css/style.components.scss";
</style>