@zfqh/uview-x 0.0.0-stage → 0.0.2

package/components/uv-form/props.ts

@@ -0,0 +1,59 @@
+// @ts-nocheck
+
+import config from '../../utils/config';
+
+const props = {
+  // 当前form的需要验证字段的集合
+  model: {
+    type: Object,
+    default: () => ({}),
+  },
+  // 验证规则
+  rules: {
+    type: [Object, Function, Array],
+    default: () => ({}),
+  },
+  // 有错误时的提示方式，message-提示信息，toast-进行toast提示
+  // border-bottom-下边框呈现红色，none-无提示
+  errorType: {
+    type: String,
+    default: 'message',
+  },
+  // 是否显示表单域的下划线边框
+  borderBottom: {
+    type: Boolean,
+    default: true,
+  },
+  // label的位置，left-左边，top-上边
+  labelPosition: {
+    type: String,
+    default: 'left',
+  },
+  // label的宽度，单位px
+  labelWidth: {
+    type: [String, Number],
+    default: 45,
+  },
+  // lable字体的对齐方式
+  labelAlign: {
+    type: String,
+    default: 'left',
+  },
+  // lable的样式，对象形式
+  labelStyle: {
+    type: Object,
+    default: () => ({}),
+  },
+  customStyle: {
+    type: [Object, String],
+    default: () => ({}),
+  },
+  customClass: {
+    type: String,
+    default: '',
+  },
+
+  ...config.props.form,
+};
+
+export default props;

package/components/uv-form/uv-form.vue

@@ -0,0 +1,256 @@
+<template>
+	<view
+		class="uv-form"
+		:class="[p.customClass]"
+		:style="[$uv.addStyle(p.customStyle)]"
+	>
+		<slot />
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { nextTick, provide, reactive, watch } from 'vue'
+	import { $uv } from '../../utils'
+	import props from './props'
+	import { useI18n } from '../../hooks'
+	import { buildFormValidationMessages } from '../../locales'
+
+	import Schema from './valid.ts'
+
+	// 去除警告信息
+	Schema.warning = function () {}
+
+	// 内置校验文案（locales/ 的 uv.form.*），用户 rules[].message 仍优先
+	const { t } = useI18n({ useScope: 'global' })
+
+	defineOptions({
+		name: 'uv-form',
+		// #ifdef UNI-APP-X
+		styleIsolation: 'app-and-page',
+		// #endif
+		virtualHost: true,
+	})
+
+	/**
+	 * Form 表单
+	 * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
+	 * @tutorial https://www.uvui.cn/components/form.html
+	 * @property {Object}						model			当前form的需要验证字段的集合
+	 * @property {Object | Function | Array}	rules			验证规则
+	 * @property {String}						errorType		错误的提示方式，见上方说明 ( 默认 message )
+	 * @property {Boolean}						borderBottom	是否显示表单域的下划线边框   ( 默认 true ）
+	 * @property {String}						labelPosition	表单域提示文字的位置，left-左侧，top-上方 ( 默认 'left' ）
+	 * @property {String | Number}				labelWidth		提示文字的宽度，单位px  ( 默认 45 ）
+	 * @property {String}						labelAlign		lable字体的对齐方式   ( 默认 'left' ）
+	 * @property {Object}						labelStyle		lable的样式，对象形式
+	 * @property {Object}						customStyle		定义需要用到的外部样式
+	 * @example <uv-form labelPosition="left" :model="model1" :rules="rules" ref="form1"></uv-form>
+	 */
+	const p = defineProps(props)
+
+	// 原始model快照，用于resetFields方法重置表单时使用
+	let originalModel: any = null
+	// 校验规则（函数形式的规则由 setRules 手动赋值，避免小程序过滤函数）
+	let formRules: any = {}
+
+	// 表单上下文：provide/inject 替代 $parent/children 链
+	// 表单上下文 key（与 uv-form-item/uv-input 内 inject 的字符串保持一致）
+	const formContext: any = reactive({
+		model: p.model,
+		originalModel: null,
+		errorType: p.errorType,
+		borderBottom: p.borderBottom,
+		labelPosition: p.labelPosition,
+		labelWidth: p.labelWidth,
+		labelAlign: p.labelAlign,
+		labelStyle: p.labelStyle,
+		// 已注册的 uv-form-item 句柄
+		items: []
+	})
+
+	// 手动设置校验的规则，如果规则中有函数的话，微信小程序中会过滤掉，所以只能手动调用设置规则
+	const setRules = (rules: any) => {
+		// 判断是否有规则
+		if (!rules || Object.keys(rules).length === 0) return
+		if (process.env.NODE_ENV === 'development' && Object.keys(formContext.model || {}).length === 0) {
+			$uv.error('设置rules，model必须设置！如果已经设置，请刷新页面。')
+			return
+		}
+		formRules = rules
+	}
+
+	// 注册/注销表单子项
+	const register = (handle: any) => {
+		formContext.items.push(handle)
+	}
+	const unregister = (handle: any) => {
+		const index = formContext.items.indexOf(handle)
+		if (index > -1) formContext.items.splice(index, 1)
+	}
+
+	// 重置model为初始值的快照
+	const resetModel = () => {
+		// 历遍所有uv-form-item，根据其prop属性，还原model的原始快照
+		formContext.items.forEach((child: any) => {
+			const prop = child.prop
+			const value = $uv.getProperty(originalModel, prop)
+			$uv.setProperty(formContext.model, prop, value)
+		})
+	}
+
+	// 清空所有uv-form-item组件的内容，本质上是调用了uv-form-item组件中的resetField()方法
+	const resetFields = () => {
+		resetModel()
+	}
+
+	// 清空校验结果
+	const clearValidate = (props?: any) => {
+		const propsArr = ([] as any[]).concat(props)
+		formContext.items.forEach((child: any) => {
+			// 如果uv-form-item的prop在props数组中，则清除对应的校验结果信息
+			if (propsArr[0] === undefined || propsArr.includes(child.prop)) {
+				child.setMessage(null)
+			}
+		})
+	}
+
+	// 对部分表单字段进行校验
+	const validateField = (value: any, callback?: any, event: string | null = null) => {
+		// nextTick是必须的，否则model的变更，可能会延后于此方法的执行
+		nextTick(() => {
+			// 校验错误信息，返回给回调方法，用于存放所有form-item的错误信息
+			const errorsRes: any[] = []
+			// 如果为字符串，转为数组
+			const values = ([] as any[]).concat(value)
+			// 历遍所有子form-item
+			formContext.items.forEach((child: any) => {
+				// 用于存放form-item的错误信息
+				const childErrors: any[] = []
+				if (!values.includes(child.prop)) return
+				// 获取对应的属性，通过类似'a.b.c'的形式
+				const propertyVal = $uv.getProperty(formContext.model, child.prop)
+				// 属性链数组
+				const propertyChain = String(child.prop).split('.')
+				const propertyName = propertyChain[propertyChain.length - 1]
+				const rule = formRules[child.prop]
+				// 如果不存在对应的规则，直接返回，否则校验器会报错
+				if (!rule) return
+				// rule规则可为数组形式，也可为对象形式，此处拼接成为数组
+				const rules = ([] as any[]).concat(rule)
+				// 对rules数组进行校验
+				for (let i = 0; i < rules.length; i++) {
+					const ruleItem = rules[i]
+					// 将uv-form-item的触发器转为数组形式
+					const trigger = ([] as any[]).concat(ruleItem && ruleItem.trigger)
+					// 如果是有传入触发事件，但是此form-item却没有配置此触发器的话，不执行校验操作
+					if (event && !trigger.includes(event)) continue
+					// 实例化校验对象，传入构造规则
+					const validator = new Schema({
+						[propertyName]: ruleItem
+					})
+					// 使用内置 i18n 校验文案（显式 ruleItem.message 仍优先）
+					validator.messages(buildFormValidationMessages((key: string) => String(t(key))))
+					validator.validate(
+						{
+							[propertyName]: propertyVal
+						},
+						(errors: any) => {
+							if ($uv.test.array(errors)) {
+								errorsRes.push(...errors)
+								childErrors.push(...errors)
+							}
+							nextTick(() => {
+								child.setMessage(childErrors[0] && childErrors[0].message ? childErrors[0].message : null)
+							})
+						}
+					)
+				}
+			})
+			// 执行回调函数
+			if (typeof callback === 'function') callback(errorsRes)
+		})
+	}
+
+	// 校验全部数据
+	const validate = () => {
+		return new Promise((resolve, reject) => {
+			nextTick(() => {
+				// 获取所有form-item的prop，交给validateField方法进行校验
+				const formItemProps = formContext.items.map((item: any) => item.prop)
+				validateField(formItemProps, (errors: any[]) => {
+					if (errors.length) {
+						// 如果错误提示方式为toast，则进行提示
+						if (formContext.errorType === 'toast') $uv.toast(errors[0].message)
+						reject(errors)
+					} else {
+						resolve(true)
+					}
+				})
+			})
+		})
+	}
+
+	formContext.register = register
+	formContext.unregister = unregister
+	formContext.setRules = setRules
+	formContext.resetFields = resetFields
+	formContext.resetModel = resetModel
+	formContext.clearValidate = clearValidate
+	formContext.validateField = validateField
+	formContext.validate = validate
+
+	provide('uv-form-context', formContext)
+
+	// 监听规则的变化
+	watch(
+		() => p.rules,
+		(rules: any) => {
+			setRules(rules)
+		},
+		{ immediate: true }
+	)
+
+	// 监听model的初始值作为重置表单的快照
+	watch(
+		() => p.model,
+		(model: any) => {
+			formContext.model = model
+			if (!originalModel) {
+				originalModel = $uv.deepClone(model)
+				formContext.originalModel = originalModel
+			}
+		},
+		{ immediate: true }
+	)
+
+	// 监听属性的变化，供 uv-form-item 响应式读取
+	watch(
+		() => [p.errorType, p.borderBottom, p.labelPosition, p.labelWidth, p.labelAlign, p.labelStyle],
+		() => {
+			formContext.errorType = p.errorType
+			formContext.borderBottom = p.borderBottom
+			formContext.labelPosition = p.labelPosition
+			formContext.labelWidth = p.labelWidth
+			formContext.labelAlign = p.labelAlign
+			formContext.labelStyle = p.labelStyle
+		}
+	)
+
+	defineExpose({
+		setRules,
+		resetFields,
+		resetModel,
+		clearValidate,
+		validateField,
+		validate
+	})
+</script>
+
+<style lang="scss">
+	@import '../../styles/components.scss';
+
+	.uv-form {
+		display: flex;
+		flex-direction: column;
+	}
+</style>