From bd99a5211f3a5fcaa051e5da868d87bb870148f5 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 01 Mar 2024 09:58:45 +0800
Subject: [PATCH] fix:手持设备

---
 uni_modules/uview-ui/components/u-form-item/u-form-item.vue |  235 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 235 insertions(+), 0 deletions(-)

diff --git a/uni_modules/uview-ui/components/u-form-item/u-form-item.vue b/uni_modules/uview-ui/components/u-form-item/u-form-item.vue
new file mode 100644
index 0000000..6aa8d69
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-form-item/u-form-item.vue
@@ -0,0 +1,235 @@
+<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: 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">
+			<text
+				v-if="!!message && parentData.errorType === 'message'"
+				class="u-form-item__body__right__message"
+				:style="{
+					marginLeft:  $u.addUnit(parentData.labelPosition === 'top' ? 0 : (labelWidth || parentData.labelWidth))
+				}"
+			>{{ message }}</text>
+		</slot>
+		<u-line
+			v-if="borderBottom"
+			:color="message && parentData.errorType === 'border-bottom' ? $u.color.error : propsLine.color"
+			:customStyle="`margin-top: ${message && parentData.errorType === 'message' ? '5px' : 0}`"
+		></u-line>
+	</view>
+</template>
+
+<script>
+	import props from './props.js';
+	/**
+	 * Form ������
+	 * @description ������������������������������������������������Input������������Select������������������������������������
+	 * @tutorial https://www.uviewui.com/components/form.html
+	 * @property {String}			label			input���label���������
+	 * @property {String}			prop			������������
+	 * @property {String | Boolean}	borderBottom	���������������������������������������
+	 * @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: [uni.$u.mpMixin, uni.$u.mixin, props],
+		data() {
+			return {
+				// ���������������
+				message: '',
+				parentData: {
+					// ���������������������
+					labelPosition: 'left',
+					// ������������������������
+					labelAlign: 'left',
+					// ���������������������
+					labelStyle: {},
+					// ���������������������
+					labelWidth: 45,
+					// ������������������
+					errorType: 'message'
+				}
+			}
+		},
+		// ������������������������������������������������u-form���
+		computed: {
+			propsLine() {
+				return uni.$u.props.line
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			init() {
+				// ������������������
+				this.updateParentData()
+				if (!this.parent) {
+					uni.$u.error('u-form-item������������u-form������������')
+				}
+			},
+			// ������������������������
+			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: 10rpx;
+					flex: 1;
+
+					&__icon {
+						margin-right: 8rpx;
+					}
+
+					&__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;
+						/* #ifndef MP */
+						@include flex;
+						align-items: center;
+						/* #endif */
+					}
+
+					&__icon {
+						margin-left: 10rpx;
+						color: $u-light-color;
+						font-size: 30rpx;
+					}
+				}
+
+				&__message {
+					font-size: 12px;
+					line-height: 12px;
+					color: $u-error;
+				}
+			}
+		}
+	}
+</style>

--
Gitblit v1.8.0