WenWuGuanJia/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue

<template>
	<view class="uni-forms-item" :class="['is-direction-' + localLabelPos, border ? 'uni-forms-item--border' : '', border && isFirstBorder ? 'is-first-border' : '']">
		<slot name="label">
			<view class="uni-forms-item__label" :class="{ 'no-label': !label && !required }" :style="{ width: localLabelWidth, justifyContent: localLabelAlign }">
				<text v-if="required" class="is-required">*</text>
				<text>{{ label }}</text>
			</view>
		</slot>
		<!-- #ifndef APP-NVUE -->
		<view class="uni-forms-item__content">
			<slot></slot>
			<view class="uni-forms-item__error" :class="{ 'msg--active': msg }">
				<text>{{ msg }}</text>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-NVUE -->
		<view class="uni-forms-item__nuve-content">
			<view class="uni-forms-item__content">
				<slot></slot>
			</view>
			<view class="uni-forms-item__error" :class="{ 'msg--active': msg }">
				<text class="error-text">{{ msg }}</text>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
/**
 * uni-fomrs-item 表单子组件
 * @description uni-fomrs-item 表单子组件，提供了基础布局已经校验能力
 * @tutorial https://ext.dcloud.net.cn/plugin?id=2773
 * @property {Boolean} required 是否必填，左边显示红色"*"号
 * @property {String } 	label 				输入框左边的文字提示
 * @property {Number } 	labelWidth 			label的宽度，单位px（默认70）
 * @property {String } 	labelAlign = [left|center|right] label的文字对齐方式（默认left）
 * 	@value left		label 左侧显示
 * 	@value center	label 居中
 * 	@value right	label 右侧对齐
 * @property {String } 	errorMessage 		显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
 * @property {String } 	name 				表单域的属性名，在使用校验规则时必填
 * @property {String } 	leftIcon 			【1.4.0废弃】label左边的图标，限 uni-ui 的图标名称
 * @property {String } 	iconColor 		【1.4.0废弃】左边通过icon配置的图标的颜色（默认#606266）
 * @property {String} validateTrigger = [bind|submit|blur]	【1.4.0废弃】校验触发器方式 默认 submit
 * 	@value bind 	发生变化时触发
 * 	@value submit 提交时触发
 * 	@value blur 	失去焦点触发
 * @property {String } 	labelPosition = [top|left] 【1.4.0废弃】label的文字的位置（默认left）
 * 	@value top	顶部显示 label
 * 	@value left	左侧显示 label
 */

export default {
	name: 'uniFormsItem',
	options: {
		virtualHost: true
	},
	provide() {
		return {
			uniFormItem: this
		};
	},
	inject: {
		form: {
			from: 'uniForm',
			default: null
		}
	},
	props: {
		// 表单校验规则
		rules: {
			type: Array,
			default() {
				return null;
			}
		},
		// 表单域的属性名，在使用校验规则时必填
		name: {
			type: [String, Array],
			default: ''
		},
		required: {
			type: Boolean,
			default: false
		},
		label: {
			type: String,
			default: ''
		},
		// label的宽度
		labelWidth: {
			type: [String, Number],
			default: ''
		},
		// label 居中方式，默认 left 取值 left/center/right
		labelAlign: {
			type: String,
			default: ''
		},
		// 强制显示错误信息
		errorMessage: {
			type: [String, Boolean],
			default: ''
		},
		// 1.4.0 弃用，统一使用 form 的校验时机
		// validateTrigger: {
		// 	type: String,
		// 	default: ''
		// },
		// 1.4.0 弃用，统一使用 form 的label 位置
		// labelPosition: {
		// 	type: String,
		// 	default: ''
		// },
		// 1.4.0 以下属性已经废弃，请使用  #label 插槽代替
		leftIcon: String,
		iconColor: {
			type: String,
			default: '#606266'
		}
	},
	data() {
		return {
			errMsg: '',
			userRules: null,
			localLabelAlign: 'left',
			localLabelWidth: '70px',
			localLabelPos: 'left',
			border: false,
			isFirstBorder: false
		};
	},
	computed: {
		// 处理错误信息
		msg() {
			return this.errorMessage || this.errMsg;
		}
	},
	watch: {
		// 规则发生变化通知子组件更新
		'form.formRules'(val) {
			// TODO 处理头条vue3 watch不生效的问题
			// #ifndef MP-TOUTIAO
			this.init();
			// #endif
		},
		'form.labelWidth'(val) {
			// 宽度
			this.localLabelWidth = this._labelWidthUnit(val);
		},
		'form.labelPosition'(val) {
			// 标签位置
			this.localLabelPos = this._labelPosition();
		},
		'form.labelAlign'(val) {}
	},
	created() {
		this.init(true);
		if (this.name && this.form) {
			// TODO 处理头条vue3 watch不生效的问题
			// #ifdef MP-TOUTIAO
			this.$watch('form.formRules', () => {
				this.init();
			});
			// #endif

			// 监听变化
			this.$watch(
				() => {
					const val = this.form._getDataValue(this.name, this.form.localData);
					return val;
				},
				(value, oldVal) => {
					const isEqual = this.form._isEqual(value, oldVal);
					// 简单判断前后值的变化，只有发生变化才会发生校验
					// TODO  如果 oldVal = undefined ，那么大概率是源数据里没有值导致 ，这个情况不哦校验 ,可能不严谨 ，需要在做观察
					// fix by mehaotian 暂时取消 && oldVal !== undefined ，如果formData 中不存在，可能会不校验
					if (!isEqual) {
						const val = this.itemSetValue(value);
						this.onFieldChange(val, false);
					}
				},
				{
					immediate: false
				}
			);
		}
	},
	// #ifndef VUE3
	destroyed() {
		if (this.__isUnmounted) return;
		this.unInit();
	},
	// #endif
	// #ifdef VUE3
	unmounted() {
		this.__isUnmounted = true;
		this.unInit();
	},
	// #endif
	methods: {
		/**
		 * 外部调用方法
		 * 设置规则 ，主要用于小程序自定义检验规则
		 * @param {Array} rules 规则源数据
		 */
		setRules(rules = null) {
			this.userRules = rules;
			this.init(false);
		},
		// 兼容老版本表单组件
		setValue() {
			// console.log('setValue 方法已经弃用，请使用最新版本的 uni-forms 表单组件以及其他关联组件。');
		},
		/**
		 * 外部调用方法
		 * 校验数据
		 * @param {any} value 需要校验的数据
		 * @param {boolean} 是否立即校验
		 * @return {Array|null} 校验内容
		 */
		async onFieldChange(value, formtrigger = true) {
			const { formData, localData, errShowType, validateCheck, validateTrigger, _isRequiredField, _realName } = this.form;
			const name = _realName(this.name);
			if (!value) {
				value = this.form.formData[name];
			}
			// fixd by mehaotian 不在校验前清空信息，解决闪屏的问题
			// this.errMsg = '';

			// fix by mehaotian 解决没有检验规则的情况下，抛出错误的问题
			const ruleLen = this.itemRules.rules && this.itemRules.rules.length;
			if (!this.validator || !ruleLen || ruleLen === 0) return;

			// 检验时机
			// let trigger = this.isTrigger(this.itemRules.validateTrigger, this.validateTrigger, validateTrigger);
			const isRequiredField = _isRequiredField(this.itemRules.rules || []);
			let result = null;
			// 只有等于 bind 时 ，才能开启时实校验
			if (validateTrigger === 'bind' || formtrigger) {
				// 校验当前表单项
				result = await this.validator.validateUpdate(
					{
						[name]: value
					},
					formData
				);

				// 判断是否必填,非必填，不填不校验，填写才校验 ,暂时只处理 undefined  和空的情况
				if (!isRequiredField && (value === undefined || value === '')) {
					result = null;
				}

				// 判断错误信息显示类型
				if (result && result.errorMessage) {
					if (errShowType === 'undertext') {
						// 获取错误信息
						this.errMsg = !result ? '' : result.errorMessage;
					}
					if (errShowType === 'toast') {
						uni.showToast({
							title: result.errorMessage || '校验错误',
							icon: 'none'
						});
					}
					if (errShowType === 'modal') {
						uni.showModal({
							title: '提示',
							content: result.errorMessage || '校验错误'
						});
					}
				} else {
					this.errMsg = '';
				}
				// 通知 form 组件更新事件
				validateCheck(result ? result : null);
			} else {
				this.errMsg = '';
			}
			return result ? result : null;
		},
		/**
		 * 初始组件数据
		 */
		init(type = false) {
			const { validator, formRules, childrens, formData, localData, _realName, labelWidth, _getDataValue, _setDataValue } = this.form || {};
			// 对齐方式
			this.localLabelAlign = this._justifyContent();
			// 宽度
			this.localLabelWidth = this._labelWidthUnit(labelWidth);
			// 标签位置
			this.localLabelPos = this._labelPosition();
			// 将需要校验的子组件加入form 队列
			this.form && type && childrens.push(this);

			if (!validator || !formRules) return;
			// 判断第一个 item
			if (!this.form.isFirstBorder) {
				this.form.isFirstBorder = true;
				this.isFirstBorder = true;
			}

			// 判断 group 里的第一个 item
			if (this.group) {
				if (!this.group.isFirstBorder) {
					this.group.isFirstBorder = true;
					this.isFirstBorder = true;
				}
			}
			this.border = this.form.border;
			// 获取子域的真实名称
			const name = _realName(this.name);
			const itemRule = this.userRules || this.rules;
			if (typeof formRules === 'object' && itemRule) {
				// 子规则替换父规则
				formRules[name] = {
					rules: itemRule
				};
				validator.updateSchema(formRules);
			}
			// 注册校验规则
			const itemRules = formRules[name] || {};
			this.itemRules = itemRules;
			// 注册校验函数
			this.validator = validator;
			// 默认值赋予
			this.itemSetValue(_getDataValue(this.name, localData));
		},
		unInit() {
			if (this.form) {
				const { childrens, formData, _realName } = this.form;
				childrens.forEach((item, index) => {
					if (item === this) {
						this.form.childrens.splice(index, 1);
						delete formData[_realName(item.name)];
					}
				});
			}
		},
		// 设置item 的值
		itemSetValue(value) {
			const name = this.form._realName(this.name);
			const rules = this.itemRules.rules || [];
			const val = this.form._getValue(name, value, rules);
			this.form._setDataValue(name, this.form.formData, val);
			return val;
		},

		/**
		 * 移除该表单项的校验结果
		 */
		clearValidate() {
			this.errMsg = '';
		},

		// 是否显示星号
		_isRequired() {
			// TODO 不根据规则显示 星号，考虑后续兼容
			// if (this.form) {
			// 	if (this.form._isRequiredField(this.itemRules.rules || []) && this.required) {
			// 		return true
			// 	}
			// 	return false
			// }
			return this.required;
		},

		// 处理对齐方式
		_justifyContent() {
			if (this.form) {
				const { labelAlign } = this.form;
				let labelAli = this.labelAlign ? this.labelAlign : labelAlign;
				if (labelAli === 'left') return 'flex-start';
				if (labelAli === 'center') return 'center';
				if (labelAli === 'right') return 'flex-end';
			}
			return 'flex-start';
		},
		// 处理 label宽度单位 ,继承父元素的值
		_labelWidthUnit(labelWidth) {
			// if (this.form) {
			// 	const {
			// 		labelWidth
			// 	} = this.form
			return this.num2px(this.labelWidth ? this.labelWidth : labelWidth || (this.label ? 70 : 'auto'));
			// }
			// return '70px'
		},
		// 处理 label 位置
		_labelPosition() {
			if (this.form) return this.form.labelPosition || 'left';
			return 'left';
		},

		/**
		 * 触发时机
		 * @param {Object} rule 当前规则内时机
		 * @param {Object} itemRlue 当前组件时机
		 * @param {Object} parentRule 父组件时机
		 */
		isTrigger(rule, itemRlue, parentRule) {
			//  bind  submit
			if (rule === 'submit' || !rule) {
				if (rule === undefined) {
					if (itemRlue !== 'bind') {
						if (!itemRlue) {
							return parentRule === '' ? 'bind' : 'submit';
						}
						return 'submit';
					}
					return 'bind';
				}
				return 'submit';
			}
			return 'bind';
		},
		num2px(num) {
			if (typeof num === 'number') {
				return `${num}px`;
			}
			return num;
		}
	}
};
</script>

<style lang="scss">
.uni-forms-item {
	position: relative;
	display: flex;
	/* #ifdef APP-NVUE */
	// 在 nvue 中，使用 margin-bottom error 信息会被隐藏
	padding-bottom: 22px;
	/* #endif */
	/* #ifndef APP-NVUE */
	margin-bottom: 22px;
	/* #endif */
	flex-direction: row;

	&__label {
		display: flex;
		flex-direction: row;
		align-items: center;
		text-align: left;
		font-size: 14px;
		color: #606266;
		height: 36px;
		padding: 0 12px 0 0;
		/* #ifndef APP-NVUE */
		vertical-align: middle;
		flex-shrink: 0;
		/* #endif */

		/* #ifndef APP-NVUE */
		box-sizing: border-box;

		/* #endif */
		&.no-label {
			padding: 0;
		}
	}

	&__content {
		/* #ifndef MP-TOUTIAO */
		// display: flex;
		// align-items: center;
		/* #endif */
		position: relative;
		font-size: 14px;
		flex: 1;
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;

		/* #ifndef APP || H5 || MP-WEIXIN || APP-NVUE */
		// TODO 因为小程序平台会多一层标签节点 ，所以需要在多余节点继承当前样式
		& > uni-easyinput,
		& > uni-data-picker {
			width: 100%;
		}

		/* #endif */
	}

	& .uni-forms-item__nuve-content {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	&__error {
		color: #f56c6c;
		font-size: 12px;
		line-height: 1;
		padding-top: 4px;
		position: absolute;
		/* #ifndef APP-NVUE */
		top: 100%;
		left: 0;
		transition: transform 0.3s;
		transform: translateY(-100%);
		/* #endif */
		/* #ifdef APP-NVUE */
		bottom: 5px;
		/* #endif */

		opacity: 0;

		.error-text {
			// 只有 nvue 下这个样式才生效
			color: #f56c6c;
			font-size: 12px;
		}

		&.msg--active {
			opacity: 1;
			transform: translateY(0%);
		}
	}

	// 位置修饰样式
	&.is-direction-left {
		flex-direction: row;
	}

	&.is-direction-top {
		flex-direction: column;

		.uni-forms-item__label {
			padding: 0 0 8px;
			line-height: 1.5715;
			text-align: left;
			/* #ifndef APP-NVUE */
			white-space: initial;
			/* #endif */
		}
	}

	.is-required {
		// color: $uni-color-error;
		color: #dd524d;
		font-weight: bold;
	}
}

.uni-forms-item--border {
	margin-bottom: 0;
	padding: 10px 0;
	// padding-bottom: 0;
	border-top: 1px #eee solid;

	/* #ifndef APP-NVUE */
	.uni-forms-item__content {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;

		.uni-forms-item__error {
			position: relative;
			top: 5px;
			left: 0;
			padding-top: 0;
		}
	}

	/* #endif */

	/* #ifdef APP-NVUE */
	display: flex;
	flex-direction: column;

	.uni-forms-item__error {
		position: relative;
		top: 0px;
		left: 0;
		padding-top: 0;
		margin-top: 5px;
	}

	/* #endif */
}

.is-first-border {
	/* #ifndef APP-NVUE */
	border: none;
	/* #endif */
	/* #ifdef APP-NVUE */
	border-width: 0;
	/* #endif */
}
</style>