From e13367edf304cb78f978e321f1679299a66b3a23 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Wed, 10 Jan 2024 16:08:18 +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