From 627c3e0a6920131d75eafa4646db373ccc936546 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:52:07 +0800
Subject: [PATCH] 小程序diamante
---
minipro_standard/uni_modules/uview-ui/components/u-form-item/u-form-item.vue | 235 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 235 insertions(+), 0 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-form-item/u-form-item.vue b/minipro_standard/uni_modules/uview-ui/components/u-form-item/u-form-item.vue
index e69de29..6aa8d69 100644
--- a/minipro_standard/uni_modules/uview-ui/components/u-form-item/u-form-item.vue
+++ b/minipro_standard/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鐨刲abel鎻愮ず璇�
+ * @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 鏄惁鏄剧ず宸﹁竟鐨勫繀濉槦鍙凤紝鍙綔鏄剧ず鐢紝鍏蜂綋鏍￠獙蹇呭～鐨勯�昏緫锛岃鍦╮ules涓厤缃� (榛樿 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闇�瑕佺粨鍚坲-form缁勪欢浣跨敤')
+ }
+ },
+ // 鑾峰彇鐖剁粍浠剁殑鍙傛暟
+ updateParentData() {
+ // 姝ゆ柟娉曞啓鍦╩ixin涓�
+ this.getParentData('u-form');
+ },
+ // 绉婚櫎u-form-item鐨勬牎楠岀粨鏋�
+ clearValidate() {
+ this.message = null
+ },
+ // 娓呯┖褰撳墠鐨勭粍浠剁殑鏍￠獙缁撴灉锛屽苟閲嶇疆涓哄垵濮嬪��
+ resetField() {
+ // 鎵惧埌鍘熷鍊�
+ const value = uni.$u.getProperty(this.parent.originalModel, this.prop)
+ // 灏唘-form鐨刴odel鐨刾rop灞炴�ч摼杩樺師鍘熷鍊�
+ 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.9.3