mall-front-app/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue

<template>
	<view class="">
		<view
			class="uni-forms-item"
			:class="{
				'uni-forms-item--border': border,
				'is-first-border': border && isFirstBorder,
				'uni-forms-item-error': msg
			}"
		>
			<view class="uni-forms-item__box">
				<view class="uni-forms-item__inner" :class="['is-direction-' + labelPos]">
					<view class="uni-forms-item__label" :style="{ width: labelWid, justifyContent: justifyContent }">
						<slot name="label">
							<text v-if="required" class="is-required">*</text>
							<uni-icons
								v-if="leftIcon"
								class="label-icon"
								size="16"
								:type="leftIcon"
								:color="iconColor"
							/>
							<text class="label-text">{{ label }}</text>

							<view v-if="label" class="label-seat"></view>
						</slot>
					</view>
					<view class="uni-forms-item__content" :class="{ 'is-input-error-border': msg }"><slot></slot></view>
				</view>
				<view
					v-if="msg"
					class="uni-error-message"
					:class="{ 'uni-error-msg--boeder': border }"
					:style="{
						paddingLeft: labelLeft
					}"
				>
					<text class="uni-error-message-text">{{ showMsg === 'undertext' ? msg : '' }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * Field 输入框
 * @description 此组件可以实现表单的输入与校验，包括 "text" 和 "textarea" 类型。
 * @tutorial https://ext.dcloud.net.cn/plugin?id=21001
 * @property {Boolean} 	required 			是否必填，左边显示红色"*"号（默认false）
 * @property {String} validateTrigger = [bind|submit]	校验触发器方式 默认 submit 可选
 * 	@value bind 	发生变化时触发
 * 	@value submit 	提交时触发
 * @property {String } 	leftIcon 			label左边的图标，限 uni-ui 的图标名称
 * @property {String } 	iconColor 			左边通过icon配置的图标的颜色（默认#606266）
 * @property {String } 	label 				输入框左边的文字提示
 * @property {Number } 	labelWidth 			label的宽度，单位px（默认65）
 * @property {String } 	labelAlign = [left|center|right] label的文字对齐方式（默认left）
 * 	@value left		label 左侧显示
 * 	@value center	label 居中
 * 	@value right	label 右侧对齐
 * @property {String } 	labelPosition = [top|left] label的文字的位置（默认left）
 * 	@value top	顶部显示 label
 * 	@value left	左侧显示 label
 * @property {String } 	errorMessage 		显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
 * @property {String } 	name 				表单域的属性名，在使用校验规则时必填
 */

export default {
	name: 'uniFormsItem',
	props: {
		// 自定义内容
		custom: {
			type: Boolean,
			default: false
		},
		// 是否显示报错信息
		showMessage: {
			type: Boolean,
			default: true
		},
		name: String,
		required: Boolean,
		validateTrigger: {
			type: String,
			default: ''
		},
		leftIcon: String,
		iconColor: {
			type: String,
			default: '#606266'
		},
		label: String,
		// 左边标题的宽度单位px
		labelWidth: {
			type: [Number, String],
			default: ''
		},
		// 对齐方式，left|center|right
		labelAlign: {
			type: String,
			default: ''
		},
		// lable的位置，可选为 left-左边，top-上边
		labelPosition: {
			type: String,
			default: ''
		},
		errorMessage: {
			type: [String, Boolean],
			default: ''
		},
		// 表单校验规则
		rules: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			errorTop: false,
			errorBottom: false,
			labelMarginBottom: '',
			errorWidth: '',
			errMsg: '',
			val: '',
			labelPos: '',
			labelWid: '',
			labelAli: '',
			showMsg: 'undertext',
			border: false,
			isFirstBorder: false,
			isArray: false,
			arrayField: ''
		};
	},
	computed: {
		msg() {
			return this.errorMessage || this.errMsg;
		},
		fieldStyle() {
			let style = {};
			if (this.labelPos == 'top') {
				style.padding = '0 0';
				this.labelMarginBottom = '6px';
			}
			if (this.labelPos == 'left' && this.msg !== false && this.msg != '') {
				style.paddingBottom = '0px';
				this.errorBottom = true;
				this.errorTop = false;
			} else if (this.labelPos == 'top' && this.msg !== false && this.msg != '') {
				this.errorBottom = false;
				this.errorTop = true;
			} else {
				// style.paddingBottom = ''
				this.errorTop = false;
				this.errorBottom = false;
			}
			return style;
		},

		// uni不支持在computed中写style.justifyContent = 'center'的形式，故用此方法
		justifyContent() {
			if (this.labelAli === 'left') return 'flex-start';
			if (this.labelAli === 'center') return 'center';
			if (this.labelAli === 'right') return 'flex-end';
		},
		labelLeft() {
			return (this.labelPos === 'left' ? parseInt(this.labelWid) : 0) + 'rpx';
		}
	},
	watch: {
		validateTrigger(trigger) {
			this.formTrigger = trigger;
		}
	},
	created() {
		this.form = this.getForm();
		this.group = this.getForm('uniGroup');
		this.formRules = [];
		this.formTrigger = this.validateTrigger;
		// 处理 name，是否数组
		if (this.name && this.name.indexOf('[') !== -1 && this.name.indexOf(']') !== -1) {
			this.isArray = true;
			this.arrayField = this.name;
			// fix by mehaotian 修改不修改的情况，动态值不检验的问题
			this.form.formData[this.name] = this.form._getValue(this.name, '');
		}
	},
	mounted() {
		if (this.form) {
			this.form.childrens.push(this);
		}
		this.init();
	},
	// #ifndef VUE3
	destroyed() {
		if (this.__isUnmounted) return;
		this.unInit();
	},
	// #endif
	// #ifdef VUE3
	unmounted() {
		this.__isUnmounted = true;
		this.unInit();
	},
	// #endif
	methods: {
		init() {
			if (this.form) {
				let {
					formRules,
					validator,
					formData,
					value,
					labelPosition,
					labelWidth,
					labelAlign,
					errShowType
				} = this.form;
				this.labelPos = this.labelPosition ? this.labelPosition : labelPosition;

				if (this.label) {
					this.labelWid = this.labelWidth ? this.labelWidth : labelWidth || 140;
				} else {
					this.labelWid = this.labelWidth ? this.labelWidth : labelWidth || 'auto';
				}
				if (this.labelWid && this.labelWid !== 'auto') {
					this.labelWid += 'rpx';
				}
				this.labelAli = this.labelAlign ? this.labelAlign : labelAlign;

				// 判断第一个 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;
				this.showMsg = errShowType;
				let name = this.isArray ? this.arrayField : this.name;
				if (!name) return;
				if (formRules && this.rules.length > 0) {
					if (!formRules[name]) {
						formRules[name] = {
							rules: this.rules
						};
					}
					validator.updateSchema(formRules);
				}
				this.formRules = formRules[name] || {};
				this.validator = validator;
			} else {
				this.labelPos = this.labelPosition || 'left';
				this.labelWid = this.labelWidth || 130;
				this.labelAli = this.labelAlign || 'left';
			}
		},
		unInit() {
			if (this.form) {
				this.form.childrens.forEach((item, index) => {
					if (item === this) {
						this.form.childrens.splice(index, 1);
						delete this.form.formData[item.name];
					}
				});
			}
		},
		/**
		 * 获取父元素实例
		 */
		getForm(name = 'uniForms') {
			let parent = this.$parent;
			let parentName = parent.$options.name;
			while (parentName !== name) {
				parent = parent.$parent;
				if (!parent) return false;
				parentName = parent.$options.name;
			}
			return parent;
		},

		/**
		 * 移除该表单项的校验结果
		 */
		clearValidate() {
			this.errMsg = '';
		},
		/**
		 * 子组件调用，如 easyinput
		 * @param {Object} value
		 */
		setValue(value) {
			let name = this.isArray ? this.arrayField : this.name;
			if (name) {
				if (this.errMsg) this.errMsg = '';
				// 给组件赋值
				this.form.formData[name] = this.form._getValue(name, value);
				if (!this.formRules || (typeof this.formRules && JSON.stringify(this.formRules) === '{}')) return;
				this.triggerCheck(this.form._getValue(this.name, value));
			}
		},

		/**
		 * 校验规则
		 * @param {Object} value
		 */
		async triggerCheck(value, formTrigger) {
			let promise = null;
			this.errMsg = '';
			// fix by mehaotian 解决没有检验规则的情况下，抛出错误的问题
			if (!this.validator || Object.keys(this.formRules).length === 0) return;
			const isNoField = this.isRequired(this.formRules.rules || []);
			let isTrigger = this.isTrigger(
				this.formRules.validateTrigger,
				this.validateTrigger,
				this.form.validateTrigger
			);
			let result = null;
			if (!!isTrigger || formTrigger) {
				let name = this.isArray ? this.arrayField : this.name;
				result = await this.validator.validateUpdate(
					{
						[name]: value
					},
					this.form.formData
				);
			}
			// 判断是否必填,非必填，不填不校验，填写才校验
			if (!isNoField && (value === undefined || value === '')) {
				result = null;
			}
			const inputComp = this.form.inputChildrens.find(child => child.rename === this.name);
			if ((isTrigger || formTrigger) && result && result.errorMessage) {
				if (inputComp) {
					inputComp.errMsg = result.errorMessage;
				}
				if (this.form.errShowType === 'toast') {
					uni.showToast({
						title: result.errorMessage || '校验错误',
						icon: 'none'
					});
				}
				if (this.form.errShowType === 'modal') {
					uni.showModal({
						title: '提示',
						content: result.errorMessage || '校验错误'
					});
				}
			} else {
				if (inputComp) {
					inputComp.errMsg = '';
				}
			}

			this.errMsg = !result ? '' : result.errorMessage;
			// 触发validate事件
			this.form.validateCheck(result ? result : null);
			// typeof callback === 'function' && callback(result ? result : null);
			// if (promise) return promise
			return result ? result : null;
		},
		/**
		 * 触发时机
		 * @param {Object} event
		 */
		isTrigger(rule, itemRlue, parentRule) {
			let rl = true;
			//  bind  submit
			if (rule === 'submit' || !rule) {
				if (rule === undefined) {
					if (itemRlue !== 'bind') {
						if (!itemRlue) {
							return parentRule === 'bind' ? true : false;
						}
						return false;
					}
					return true;
				}
				return false;
			}
			return true;
		},
		// 是否有必填字段
		isRequired(rules) {
			let isNoField = false;
			for (let i = 0; i < rules.length; i++) {
				const ruleData = rules[i];
				if (ruleData.required) {
					isNoField = true;
					break;
				}
			}
			return isNoField;
		}
	}
};
</script>

<style lang="scss">
.uni-forms-item {
	position: relative;
	padding: 0px;
	text-align: left;
	color: #333;
	font-size: 14px;
	// margin-bottom: 22px;
}

.uni-forms-item__box {
	position: relative;
}

.uni-forms-item__inner {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	// flex-direction: row;
	// align-items: center;
	padding-bottom: 22px;
	// margin-bottom: 22px;
}

.is-direction-left {
	flex-direction: row;
}

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

.uni-forms-item__label {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-shrink: 0;
	box-sizing: border-box;
	/* #endif */
	flex-direction: row;
	align-items: center;
	width: 65px;
	// line-height: 2;
	// margin-top: 3px;
	padding: 5px 0;
	height: 72rpx;
	// margin-right: 5px;

	.label-text {
		font-size: 28rpx;
		color: #333333;
	}
	.label-seat {
		margin-right: 5px;
	}
}

.uni-forms-item__content {
	/* #ifndef APP-NVUE */
	width: 100%;
	box-sizing: border-box;
	min-height: 36px;
	/* #endif */
	flex: 1;
}

.label-icon {
	margin-right: 5px;
	margin-top: -1px;
}

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

.uni-error-message {
	position: absolute;
	bottom: 0px;
	left: 0;
	text-align: left;
}

.uni-error-message-text {
	line-height: 44rpx;
	color: #dd524d;
	font-size: 24rpx;
}

.uni-error-msg--boeder {
	position: relative;
	bottom: 0;
	line-height: 22px;
}

.is-input-error-border {
	border-color: #dd524d;
}

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

	.uni-forms-item__inner {
		padding: 0;
	}
}

.uni-forms-item-error {
	// padding-bottom: 0;
}

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

.uni-forms--no-padding {
	padding: 0;
}
</style>