front/uni_modules/uview-next/components/u-form-item/u-form-item.vue

<template>
	<view class="u-form-item">
		<view
			class="u-form-item__body"
			@tap="clickHandler"
			:style="[$u.addStyle(customStyle), {
				flexDirection: (labelPosition || parentData.labelPosition) === 'left' ? 'row' : 'column'
			}]"
		>
			<!-- 微信小程序中，将一个参数设置空字符串，结果会变成字符串"true" -->
			<slot name="label">
				<!-- {{required}} -->
				<view
					class="u-form-item__body__left"
					v-if="required || leftIcon || label"
					:style="[{
						width: $u.addUnit(labelWidth || parentData.labelWidth),
						marginBottom: (labelPosition || parentData.labelPosition) === 'left' ? 0 : '5px',
					}]"
				>
					<!-- 为了块对齐 -->
					<view class="u-form-item__body__left__content">
						<!-- nvue不支持伪元素before -->
						<text
							v-if="required"
							class="u-form-item__body__left__content__required"
						>*</text>
						<view
							class="u-form-item__body__left__content__icon"
							v-if="leftIcon"
						>
							<u-icon
								:name="leftIcon"
								:custom-style="leftIconStyle"
							></u-icon>
						</view>
						<text
							class="u-form-item__body__left__content__label"
							:style="[parentData.labelStyle, {
								justifyContent: parentData.labelAlign === 'left' ? 'flex-start' : parentData.labelAlign === 'center' ? 'center' : 'flex-end'
							}]"
						>{{ label }}</text>
					</view>
				</view>
			</slot>
			<view class="u-form-item__body__right">
				<view class="u-form-item__body__right__content">
					<view class="u-form-item__body__right__content__slot">
						<slot />
					</view>
					<view
						class="item__body__right__content__icon"
						v-if="$slots.right"
					>
						<slot name="right" />
					</view>
				</view>
			</view>
		</view>
		<slot name="error" v-bind:message="message">
			<text
				v-if="!!message && parentData.errorType === 'message'"
				class="u-form-item__body__right__message"
				:style="{
					marginLeft:  $u.addUnit((labelPosition || parentData.labelPosition) === 'top' ? 0 : (labelWidth || parentData.labelWidth))
				}"
			>{{ message }}</text>
		</slot>
		<u-line
			v-if="elBorderBottom"
			:color="message && parentData.errorType === 'border-bottom' ? $u.theme.error : elBorderBottomColor"
			:customStyle="`margin-top: ${message && parentData.errorType === 'message' ? '5px' : 0}`"
		></u-line>
	</view>
</template>

<script>
	import props from './props.js';
	import mixin from '../../libs/mixin/mixin'
	import mpMixin from '../../libs/mixin/mpMixin';
	/**
	 * Form 表单
	 * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
	 * @tutorial https://uview.d3u.cn/components/form.html
	 * @property {String}			label			input的label提示语
	 * @property {String}			prop			绑定的值
	 * @property {Array}			rules			绑定的校验规则
	 * @property {String | Boolean}	borderBottom	是否显示表单域的下划线边框
	 * @property {String}			borderBottomColor	下划线边框的颜色
	 * @property {String | Number}	labelWidth		label的宽度，单位px
	 * @property {String}			rightIcon		右侧图标
	 * @property {String}			leftIcon		左侧图标
	 * @property {String | Object} leftIconStyle 左侧图标的样式
	 * @property {Boolean}			required		是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置 (默认 false )
	 *
	 * @example <u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1"></u-form-item>
	 */
	export default {
		name: 'u-form-item',
		mixins: [mpMixin, mixin, props],
		data() {
			return {
				// 错误提示语
				message: '',
				itemRules: [],
				parentData: {
					// 提示文本的位置
					labelPosition: 'left',
					// 提示文本对齐方式
					labelAlign: 'left',
					// 提示文本的样式
					labelStyle: {},
					// 提示文本的宽度
					labelWidth: 45,
					// 错误提示方式
					errorType: 'message',
					// 是否显示表单域的下划线边框
					borderBottom: null,
					// 下划线边框的颜色
					borderBottomColor: null
				}
			}
		},
		// 组件创建完成时，将当前实例保存到u-form中
		computed: {
			elBorderBottom() {
				return this.borderBottom === '' ? this.parentData.borderBottom : this.borderBottom
			},
			elBorderBottomColor() {
				return this.borderBottomColor === '' ? this.parentData.borderBottomColor : this.borderBottomColor
			}
		},
		mounted() {
			this.init()
		},
		watch: {
			// 监听规则的变化
			rules: {
				immediate: true,
				handler(n) {
					this.setRules(n);
				},
			},
		},
		// #ifdef VUE3
		emits: ["click"],
		// #endif
		methods: {
			init() {
				// 父组件的实例
				this.updateParentData()
				if (!this.parent) {
					uni.$u.error('u-form-item需要结合u-form组件使用')
				}
			},
			// 手动设置校验的规则，vue2中如果规则中有函数的话，微信小程序中会过滤掉，所以只能手动调用设置规则
			setRules(rules) {
				if (Object.keys(rules).length === 0) return;
				this.itemRules = rules;
			},
			// 获取父组件的参数
			updateParentData() {
				// 此方法写在mixin中
				this.getParentData('u-form');
			},
			// 移除u-form-item的校验结果
			clearValidate() {
				this.message = null
			},
			// 清空当前的组件的校验结果，并重置为初始值
			resetField() {
				// 找到原始值
				const value = uni.$u.getProperty(this.parent.originalModel, this.prop)
				// 将u-form的model的prop属性链还原原始值
				uni.$u.setProperty(this.parent.model, this.prop, value)
				// 移除校验结果
				this.message = null
			},
			// 点击组件
			clickHandler() {
				this.$emit('click')
			}
		},
	}
</script>

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

	.u-form-item {
		@include flex(column);
		font-size: 14px;
		color: $u-main-color;

		&__body {
			@include flex;
			padding: 10px 0;

			&__left {
				@include flex;
				align-items: center;

				&__content {
					position: relative;
					@include flex;
					align-items: center;
					padding-right: 5px;
					flex: 1;

					&__icon {
						margin-right: 4px;
					}

					&__required {
						position: absolute;
						left: -9px;
						color: $u-error;
						line-height: 20px;
						font-size: 20px;
						top: 3px;
					}

					&__label {
						@include flex;
						align-items: center;
						flex: 1;
						color: $u-main-color;
						font-size: 15px;
					}
				}
			}

			&__right {
				flex: 1;

				&__content {
					@include flex;
					align-items: center;
					flex: 1;

					&__slot {
						flex: 1;
						@include flex;
						align-items: center;
					}

					&__icon {
						margin-left: 10rpx;
						color: $u-light-color;
						font-size: 15px;
					}
				}

				&__message {
					font-size: 12px;
					line-height: 12px;
					color: $u-error;
				}
			}
		}
	}
</style>