From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目

---
 uview-ui/components/u-modal/u-modal.vue |  283 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 283 insertions(+), 0 deletions(-)

diff --git a/uview-ui/components/u-modal/u-modal.vue b/uview-ui/components/u-modal/u-modal.vue
new file mode 100644
index 0000000..7fe5fbb
--- /dev/null
+++ b/uview-ui/components/u-modal/u-modal.vue
@@ -0,0 +1,283 @@
+<template>
+	<view>
+		<u-popup :zoom="zoom" mode="center" :popup="false" :z-index="uZIndex" v-model="value" :length="width"
+		 :mask-close-able="maskCloseAble" :border-radius="borderRadius" @close="popupClose" :negative-top="negativeTop">
+			<view class="u-model">
+				<view v-if="showTitle" class="u-model__title u-line-1" :style="[titleStyle]">{{ title }}</view>
+				<view class="u-model__content">
+					<view :style="[contentStyle]" v-if="$slots.default  || $slots.$default">
+						<slot />
+					</view>
+					<view v-else class="u-model__content__message" :style="[contentStyle]">{{ content }}</view>
+				</view>
+				<view class="u-model__footer u-border-top" v-if="showCancelButton || showConfirmButton">
+					<view v-if="showCancelButton" :hover-stay-time="100" hover-class="u-model__btn--hover" class="u-model__footer__button"
+					 :style="[cancelBtnStyle]" @tap="cancel">
+						{{cancelText}}
+					</view>
+					<view v-if="showConfirmButton || $slots['confirm-button']" :hover-stay-time="100" :hover-class="asyncClose ? 'none' : 'u-model__btn--hover'"
+					 class="u-model__footer__button hairline-left" :style="[confirmBtnStyle]" @tap="confirm">
+						<slot v-if="$slots['confirm-button']" name="confirm-button"></slot>
+						<block v-else>
+							<u-loading mode="circle" :color="confirmColor" v-if="loading"></u-loading>
+							<block v-else>
+								{{confirmText}}
+							</block>
+						</block>
+					</view>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	/**
+	 * modal 妯℃�佹
+	 * @description 寮瑰嚭妯℃�佹锛屽父鐢ㄤ簬娑堟伅鎻愮ず銆佹秷鎭‘璁ゃ�佸湪褰撳墠椤甸潰鍐呭畬鎴愮壒瀹氱殑浜や簰鎿嶄綔
+	 * @tutorial https://www.uviewui.com/components/modal.html
+	 * @property {Boolean} value 鏄惁鏄剧ず妯℃�佹
+	 * @property {String | Number} z-index 灞傜骇
+	 * @property {String} title 妯℃�佹鏍囬锛堥粯璁�"鎻愮ず"锛�
+	 * @property {String | Number} width 妯℃�佹瀹藉害锛堥粯璁�600锛�
+	 * @property {String} content 妯℃�佹鍐呭锛堥粯璁�"鍐呭"锛�
+	 * @property {Boolean} show-title 鏄惁鏄剧ず鏍囬锛堥粯璁rue锛�
+	 * @property {Boolean} async-close 鏄惁寮傛鍏抽棴锛屽彧瀵圭‘瀹氭寜閽湁鏁堬紙榛樿false锛�
+	 * @property {Boolean} show-confirm-button 鏄惁鏄剧ず纭鎸夐挳锛堥粯璁rue锛�
+	 * @property {Stringr | Number} negative-top modal寰�涓婂亸绉荤殑鍊�
+	 * @property {Boolean} show-cancel-button 鏄惁鏄剧ず鍙栨秷鎸夐挳锛堥粯璁alse锛�
+	 * @property {Boolean} mask-close-able 鏄惁鍏佽鐐瑰嚮閬僵鍏抽棴modal锛堥粯璁alse锛�
+	 * @property {String} confirm-text 纭鎸夐挳鐨勬枃瀛楀唴瀹癸紙榛樿"纭"锛�
+	 * @property {String} cancel-text 鍙栨秷鎸夐挳鐨勬枃瀛楀唴瀹癸紙榛樿"鍙栨秷"锛�
+	 * @property {String} cancel-color 鍙栨秷鎸夐挳鐨勯鑹诧紙榛樿"#606266"锛�
+	 * @property {String} confirm-color 纭鎸夐挳鐨勬枃瀛楀唴瀹癸紙榛樿"#497bff"锛�
+	 * @property {String | Number} border-radius 妯℃�佹鍦嗚鍊硷紝鍗曚綅rpx锛堥粯璁�16锛�
+	 * @property {Object} title-style 鑷畾涔夋爣棰樻牱寮忥紝瀵硅薄褰㈠紡
+	 * @property {Object} content-style 鑷畾涔夊唴瀹规牱寮忥紝瀵硅薄褰㈠紡
+	 * @property {Object} cancel-style 鑷畾涔夊彇娑堟寜閽牱寮忥紝瀵硅薄褰㈠紡
+	 * @property {Object} confirm-style 鑷畾涔夌‘璁ゆ寜閽牱寮忥紝瀵硅薄褰㈠紡
+	 * @property {Boolean} zoom 鏄惁寮�鍚缉鏀炬ā寮忥紙榛樿true锛�
+	 * @event {Function} confirm 纭鎸夐挳琚偣鍑�
+	 * @event {Function} cancel 鍙栨秷鎸夐挳琚偣鍑�
+	 * @example <u-modal :src="title" :content="content"></u-modal>
+	 */
+	export default {
+		name: 'u-modal',
+		props: {
+			// 鏄惁鏄剧ずModal
+			value: {
+				type: Boolean,
+				default: false
+			},
+			// 灞傜骇z-index
+			zIndex: {
+				type: [Number, String],
+				default: ''
+			},
+			// 鏍囬
+			title: {
+				type: [String],
+				default: '鎻愮ず'
+			},
+			// 寮圭獥瀹藉害锛屽彲浠ユ槸鏁板��(rpx)锛岀櫨鍒嗘瘮锛宎uto绛�
+			width: {
+				type: [Number, String],
+				default: 600
+			},
+			// 寮圭獥鍐呭
+			content: {
+				type: String,
+				default: '鍐呭'
+			},
+			// 鏄惁鏄剧ず鏍囬
+			showTitle: {
+				type: Boolean,
+				default: true
+			},
+			// 鏄惁鏄剧ず纭鎸夐挳
+			showConfirmButton: {
+				type: Boolean,
+				default: true
+			},
+			// 鏄惁鏄剧ず鍙栨秷鎸夐挳
+			showCancelButton: {
+				type: Boolean,
+				default: false
+			},
+			// 纭鏂囨
+			confirmText: {
+				type: String,
+				default: '纭'
+			},
+			// 鍙栨秷鏂囨
+			cancelText: {
+				type: String,
+				default: '鍙栨秷'
+			},
+			// 纭鎸夐挳棰滆壊
+			confirmColor: {
+				type: String,
+				default: '#497bff'
+			},
+			// 鍙栨秷鏂囧瓧棰滆壊
+			cancelColor: {
+				type: String,
+				default: '#606266'
+			},
+			// 鍦嗚鍊�
+			borderRadius: {
+				type: [Number, String],
+				default: 16
+			},
+			// 鏍囬鐨勬牱寮�
+			titleStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 鍐呭鐨勬牱寮�
+			contentStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 鍙栨秷鎸夐挳鐨勬牱寮�
+			cancelStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 纭畾鎸夐挳鐨勬牱寮�
+			confirmStyle: {
+				type: Object,
+				default () {
+					return {}
+				}
+			},
+			// 鏄惁寮�鍚缉鏀炬晥鏋�
+			zoom: {
+				type: Boolean,
+				default: true
+			},
+			// 鏄惁寮傛鍏抽棴锛屽彧瀵圭‘瀹氭寜閽湁鏁�
+			asyncClose: {
+				type: Boolean,
+				default: false
+			},
+			// 鏄惁鍏佽鐐瑰嚮閬僵鍏抽棴modal
+			maskCloseAble: {
+				type: Boolean,
+				default: false
+			},
+			// 缁欎竴涓礋鐨刴argin-top锛屽線涓婂亸绉伙紝閬垮厤鍜岄敭鐩橀噸鍚堢殑鎯呭喌
+			negativeTop: {
+				type: [String, Number],
+				default: 0
+			}
+		},
+		data() {
+			return {
+				loading: false, // 纭鎸夐挳鏄惁姝ｅ湪鍔犺浇涓�
+			}
+		},
+		computed: {
+			cancelBtnStyle() {
+				return Object.assign({
+					color: this.cancelColor
+				}, this.cancelStyle);
+			},
+			confirmBtnStyle() {
+				return Object.assign({
+					color: this.confirmColor
+				}, this.confirmStyle);
+			},
+			uZIndex() {
+				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
+			}
+		},
+		watch: {
+			// 濡傛灉鏄紓姝ュ叧闂椂锛屽閮ㄤ慨鏀箆-model鐨勫�间负false鏃讹紝閲嶇疆鍐呴儴鐨刲oading鐘舵��
+			// 閬垮厤涓嬫鎵撳紑鐨勬椂鍊欙紝鐘舵�佹贩涔�
+			value(n) {
+				if (n === true) this.loading = false;
+			}
+		},
+		methods: {
+			confirm() {
+				// 寮傛鍏抽棴
+				if (this.asyncClose) {
+					this.loading = true;
+				} else {
+					this.$emit('input', false);
+				}
+				this.$emit('confirm');
+			},
+			cancel() {
+				this.$emit('cancel');
+				this.$emit('input', false);
+				// 鐩墠popup寮圭獥鍏抽棴鏈変竴涓欢鏃舵搷浣滐紝姝ゅ鍋氫竴涓欢鏃�
+				// 閬垮厤纭鎸夐挳鏂囧瓧鍙樻垚浜�"纭畾"瀛楁牱锛宮odal杩樻病娑堝け锛岄�犳垚瑙嗚涓嶅ソ鐨勬晥鏋�
+				setTimeout(() => {
+					this.loading = false;
+				}, 300);
+			},
+			// 鐐瑰嚮閬僵鍏抽棴modal锛岃缃畍-model鐨勫�间负false锛屽惁鍒欐棤娉曠浜屾寮硅捣modal
+			popupClose() {
+				this.$emit('input', false);
+			},
+			// 娓呴櫎鍔犺浇涓殑鐘舵��
+			clearLoading() {
+				this.loading = false;
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/style.components.scss";
+
+	.u-model {
+		height: auto;
+		overflow: hidden;
+		font-size: 32rpx;
+		background-color: #fff;
+
+		&__btn--hover {
+			background-color: rgb(230, 230, 230);
+		}
+
+		&__title {
+			padding-top: 48rpx;
+			font-weight: 500;
+			text-align: center;
+			color: $u-main-color;
+		}
+
+		&__content {
+			&__message {
+				padding: 48rpx;
+				font-size: 30rpx;
+				text-align: center;
+				color: $u-content-color;
+			}
+		}
+
+		&__footer {
+			@include vue-flex;
+
+			&__button {
+				flex: 1;
+				height: 100rpx;
+				line-height: 100rpx;
+				font-size: 32rpx;
+				box-sizing: border-box;
+				cursor: pointer;
+				text-align: center;
+				border-radius: 4rpx;
+			}
+		}
+	}
+</style>

--
Gitblit v1.9.3