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-modal/u-modal.vue |  227 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 227 insertions(+), 0 deletions(-)

diff --git a/uni_modules/uview-ui/components/u-modal/u-modal.vue b/uni_modules/uview-ui/components/u-modal/u-modal.vue
new file mode 100644
index 0000000..2cbc737
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-modal/u-modal.vue
@@ -0,0 +1,227 @@
+<template>
+	<u-popup
+		mode="center"
+		:zoom="zoom"
+		:show="show"
+		:customStyle="{
+			borderRadius: '6px', 
+			overflow: 'hidden',
+			marginTop: `-${$u.addUnit(negativeTop)}`
+		}"
+		:closeOnClickOverlay="closeOnClickOverlay"
+		:safeAreaInsetBottom="false"
+		:duration="400"
+		@click="clickHandler"
+	>
+		<view
+			class="u-modal"
+			:style="{
+				width: $u.addUnit(width),
+			}"
+		>
+			<text
+				class="u-modal__title"
+				v-if="title"
+			>{{ title }}</text>
+			<view
+				class="u-modal__content"
+				:style="{
+					paddingTop: `${title ? 12 : 25}px`
+				}"
+			>
+				<slot>
+					<text class="u-modal__content__text">{{ content }}</text>
+				</slot>
+			</view>
+			<view
+				class="u-modal__button-group--confirm-button"
+				v-if="$slots.confirmButton"
+			>
+				<slot name="confirmButton"></slot>
+			</view>
+			<template v-else>
+				<u-line></u-line>
+				<view
+					class="u-modal__button-group"
+					:style="{
+						flexDirection: buttonReverse ? 'row-reverse' : 'row'
+					}"
+				>
+					<view
+						class="u-modal__button-group__wrapper u-modal__button-group__wrapper--cancel"
+						:hover-stay-time="150"
+						hover-class="u-modal__button-group__wrapper--hover"
+						:class="[showCancelButton && !showConfirmButton && 'u-modal__button-group__wrapper--only-cancel']"
+						v-if="showCancelButton"
+						@tap="cancelHandler"
+					>
+						<text
+							class="u-modal__button-group__wrapper__text"
+							:style="{
+								color: cancelColor
+							}"
+						>{{ cancelText }}</text>
+					</view>
+					<u-line
+						direction="column"
+						v-if="showConfirmButton && showCancelButton"
+					></u-line>
+					<view
+						class="u-modal__button-group__wrapper u-modal__button-group__wrapper--confirm"
+						:hover-stay-time="150"
+						hover-class="u-modal__button-group__wrapper--hover"
+						:class="[!showCancelButton && showConfirmButton && 'u-modal__button-group__wrapper--only-confirm']"
+						v-if="showConfirmButton"
+						@tap="confirmHandler"
+					>
+						<u-loading-icon v-if="loading"></u-loading-icon>
+						<text
+							v-else
+							class="u-modal__button-group__wrapper__text"
+							:style="{
+								color: confirmColor
+							}"
+						>{{ confirmText }}</text>
+					</view>
+				</view>
+			</template>
+		</view>
+	</u-popup>
+</template>
+
+<script>
+	import props from './props.js';
+	/**
+	 * Modal ���������
+	 * @description ���������������������������������������������������������������������������������������������������������
+	 * @tutorial https://www.uviewui.com/components/modul.html
+	 * @property {Boolean}			show				������������������������������������show ��������� false ���
+	 * @property {String}			title				������������
+	 * @property {String}			content				���������������������������slot���������������������������
+	 * @property {String}			confirmText			��������������������� ��������� '������' ���
+	 * @property {String}			cancelText			��������������������� ��������� '������' ���
+	 * @property {Boolean}			showConfirmButton	������������������������ ��������� true ���
+	 * @property {Boolean}			showCancelButton	������������������������ ��������� false ���
+	 * @property {String}			confirmColor		��������������������� ��������� '#2979ff' ���
+	 * @property {String}			cancelColor			��������������������� ��������� '#606266' ���
+	 * @property {Boolean}			buttonReverse		������������������������������ ��������� false ���
+	 * @property {Boolean}			zoom				������������������������ ��������� true ���
+	 * @property {Boolean}			asyncClose			��������������������������������������������������������������� ��������� false ���
+	 * @property {Boolean}			closeOnClickOverlay	������������������������������Modal ��������� false ���
+	 * @property {String | Number}	negativeTop			������������������������������������margin-top������������������������������������������������������������������������������������px������ ��������� 0 ���
+	 * @property {String | Number}	width				modal���������������������������������������������px���rpx������ ��������� '650rpx' ���
+	 * @property {String}			confirmButtonShape	���������������������,���������������������������������������
+	 * @event {Function} confirm	���������������������������
+	 * @event {Function} cancel		���������������������������
+	 * @event {Function} close		���������������������������closeOnClickOverlay���true������
+	 * @example <u-modal :show="true" title="title" content="content"></u-modal>
+	 */
+	export default {
+		name: 'u-modal',
+		mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+		data() {
+			return {
+				loading: false
+			}
+		},
+		watch: {
+			show(n) {
+				// ���������������������������modal������������������������������loading
+				// ���������������modal������loading���������������������
+				if (n && this.loading) this.loading = false
+			}
+		},
+		methods: {
+			// ������������������
+			confirmHandler() {
+				// ���������������������������������������������loading������
+				if (this.asyncClose) {
+					this.loading = true;
+				}
+				this.$emit('confirm')
+			},
+			// ������������������
+			cancelHandler() {
+				this.$emit('cancel')
+			},
+			// ������������
+			// ���������������������modal���������������������������������������������������
+			// ������modal���������popup���������������������������������������������������������������������������������������������������flex������
+			// ���������������������������������������������������������������������������������������������������������������������������������popup���������
+			// ������������������������������.stop���������������������������������������������������������
+			clickHandler() {
+				if (this.closeOnClickOverlay) {
+					this.$emit('close')
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+	$u-modal-border-radius: 6px;
+
+	.u-modal {
+		width: 650rpx;
+		border-radius: $u-modal-border-radius;
+		overflow: hidden;
+
+		&__title {
+			font-size: 16px;
+			font-weight: bold;
+			color: $u-content-color;
+			text-align: center;
+			padding-top: 25px;
+		}
+
+		&__content {
+			padding: 12px 25px 25px 25px;
+			@include flex;
+			justify-content: center;
+
+			&__text {
+				font-size: 15px;
+				color: $u-content-color;
+				flex: 1;
+			}
+		}
+
+		&__button-group {
+			@include flex;
+
+			&--confirm-button {
+				flex-direction: column;
+				padding: 0px 25px 15px 25px;
+			}
+
+			&__wrapper {
+				flex: 1;
+				@include flex;
+				justify-content: center;
+				align-items: center;
+				height: 48px;
+				
+				&--confirm,
+				&--only-cancel {
+					border-bottom-right-radius: $u-modal-border-radius;
+				}
+				
+				&--cancel,
+				&--only-confirm {
+					border-bottom-left-radius: $u-modal-border-radius;
+				}
+
+				&--hover {
+					background-color: $u-bg-color;
+				}
+
+				&__text {
+					color: $u-content-color;
+					font-size: 16px;
+					text-align: center;
+				}
+			}
+		}
+	}
+</style>

--
Gitblit v1.8.0