uview-ultra 4.5.46

package/components/up-modal/props.uts

@@ -0,0 +1,113 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from './modal'
+let crtProp = defProps['modal'] as UTSJSONObject
+
+export const propsModal = defineMixin({
+    props: {
+        // 是否展示modal
+        show: {
+            type: Boolean,
+            default: crtProp['show']
+        },
+        // 标题
+        title: {
+            type: String,
+            default: crtProp['title']
+        },
+        // 弹窗内容
+        content: {
+            type: String,
+            default: crtProp['content']
+        },
+        // 确认文案
+        confirmText: {
+            type: String,
+            default: crtProp['confirmText']
+        },
+        // 取消文案
+        cancelText: {
+            type: String,
+            default: crtProp['cancelText']
+        },
+        // 是否显示确认按钮
+        showConfirmButton: {
+            type: Boolean,
+            default: crtProp['showConfirmButton']
+        },
+        // 是否显示取消按钮
+        showCancelButton: {
+            type: Boolean,
+            default: crtProp['showCancelButton']
+        },
+        // 确认按钮颜色
+        confirmColor: {
+            type: String,
+            default: crtProp['confirmColor']
+        },
+        // 取消文字颜色
+        cancelColor: {
+            type: String,
+            default: crtProp['cancelColor']
+        },
+        // 对调确认和取消的位置
+        buttonReverse: {
+            type: Boolean,
+            default: crtProp['buttonReverse']
+        },
+        // 是否开启缩放效果
+        zoom: {
+            type: Boolean,
+            default: crtProp['zoom']
+        },
+        // 是否异步关闭，只对确定按钮有效
+        asyncClose: {
+            type: Boolean,
+            default: crtProp['asyncClose']
+        },
+        // 是否允许点击遮罩关闭modal
+        closeOnClickOverlay: {
+            type: Boolean,
+            default: crtProp['closeOnClickOverlay']
+        },
+        // 给一个负的margin-top，往上偏移，避免和键盘重合的情况
+        negativeTop: {
+            type: [String, Number],
+            default: crtProp['negativeTop']
+        },
+        // modal宽度，不支持百分比，可以数值，px，rpx单位
+        width: {
+            type: [String, Number],
+            default: crtProp['width']
+        },
+        // 确认按钮的样式，circle-圆形，square-方形，如设置，将不会显示取消按钮
+        confirmButtonShape: {
+            type: String,
+            default: crtProp['confirmButtonShape']
+        },
+        // 弹窗动画过度时间
+        duration: {
+            type: Number,
+            default: crtProp['duration']
+        },
+        // 文案对齐方式
+        contentTextAlign: {
+            type: String,
+            default: crtProp['contentTextAlign']
+        },
+        // 异步确定时如果点击了取消时候的提示文案
+        asyncCloseTip: {
+            type: String,
+            default: crtProp['asyncCloseTip']
+        },
+        // 是否异步关闭，只对取消按钮有效
+        asyncCancelClose: {
+            type: Boolean,
+            default: crtProp['asyncCancelClose']
+        },
+        // 内容样式
+        contentStyle: {
+            type: Object,
+            default: crtProp['contentStyle']
+        }
+    }
+})

package/components/up-modal/up-modal.uvue

@@ -0,0 +1,407 @@
+<template>
+	<up-popup
+		mode="center"
+		:zoom="zoom"
+		:show="show"
+		:class="[customClass]"
+		:customStyle="popupStyle"
+		:closeOnClickOverlay="closeOnClickOverlay"
+		:safeAreaInsetBottom="false"
+		:duration="duration"
+		@click="clickHandler"
+	>
+		<view
+			class="up-modal"
+			:style="modalStyle"
+		>
+			<view
+				class="up-modal__title"
+				v-if="title"
+			>{{ title }}</view>
+			<view
+				class="up-modal__content"
+				:style="contentStyleCpu"
+			>
+				<slot>
+					<text class="up-modal__content__text" :style="contentTextStyle">
+						{{ content }}
+					</text>
+				</slot>
+			</view>
+			<view
+				class="up-modal__button-group--confirm-button"
+				v-if="$slots['confirmButton']"
+			>
+				<slot name="confirmButton"></slot>
+			</view>
+			<template v-else>
+				<up-line></up-line>
+				<view
+					class="up-modal__button-group"
+					:style="buttonGroupStyle"
+				>
+					<view
+						class="up-modal__button-group__wrapper up-modal__button-group__wrapper--cancel"
+						:hover-stay-time="150"
+						hover-class="up-modal__button-group__wrapper--hover"
+						:class="[(showCancelButton && !showConfirmButton) ? 'up-modal__button-group__wrapper--only-cancel' : '']"
+						v-if="showCancelButton"
+						@tap="cancelHandler"
+					>
+						<text
+							class="up-modal__button-group__wrapper__text"
+							:style="cancelTextStyle"
+						>{{ cancelText }}</text>
+					</view>
+					<up-line
+						direction="column"
+						v-if="showConfirmButton && showCancelButton"
+					></up-line>
+					<view
+						class="up-modal__button-group__wrapper up-modal__button-group__wrapper--confirm"
+						:hover-stay-time="150"
+						hover-class="up-modal__button-group__wrapper--hover"
+						:class="[(!showCancelButton && showConfirmButton) ? 'up-modal__button-group__wrapper--only-confirm' : '']"
+						v-if="showConfirmButton"
+						@tap="confirmHandler"
+					>
+						<up-loading-icon v-if="loading"></up-loading-icon>
+						<text
+							v-else
+							class="up-modal__button-group__wrapper__text"
+							:style="confirmTextStyle"
+						>{{ confirmText }}</text>
+					</view>
+				</view>
+			</template>
+		</view>
+		<template #bottom>
+			<slot name="popupBottom"></slot>
+		</template>
+	</up-popup>
+</template>
+
+<script setup lang="uts">
+	import { computed, ref, watch } from 'vue'
+	import defProps from './modal.uts'
+	import { addUnit } from '../../libs/function/index.uts';
+	
+	/**
+	 * Modal 模态框
+	 * @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。
+	 * @tutorial https://uview-plus.jiangruyi.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	确认按钮的样式,如设置，将不会显示取消按钮
+	 * @property {Number}			duration			弹窗动画过度时间 （默认 400 ）
+	 * @event {Function} confirm	点击确认按钮时触发
+	 * @event {Function} cancel		点击取消按钮时触发
+	 * @event {Function} close		点击遮罩关闭出发，closeOnClickOverlay为true有效
+	 * @example <up-modal :show="show" />
+	 */
+	defineOptions({
+		styleIsolation: 'app-and-page',
+		name: 'up-modal'
+	})
+
+	const props = defineProps({
+		// 是否展示modal
+		show: {
+			type: Boolean,
+			default: defProps.getBoolean('modal.show')
+		},
+		// 标题
+		title: {
+			type: String,
+			default: defProps.getString('modal.title')
+		},
+		// 弹窗内容
+		content: {
+			type: String,
+			default: defProps.getString('modal.content')
+		},
+		// 确认文案
+		confirmText: {
+			type: String,
+			default: defProps.getString('modal.confirmText')
+		},
+		// 取消文案
+		cancelText: {
+			type: String,
+			default: defProps.getString('modal.cancelText')
+		},
+		// 是否显示确认按钮
+		showConfirmButton: {
+			type: Boolean,
+			default: defProps.getBoolean('modal.showConfirmButton')
+		},
+		// 是否显示取消按钮
+		showCancelButton: {
+			type: Boolean,
+			default: defProps.getBoolean('modal.showCancelButton')
+		},
+		// 确认按钮颜色
+		confirmColor: {
+			type: String,
+			default: defProps.getString('modal.confirmColor')
+		},
+		// 取消文字颜色
+		cancelColor: {
+			type: String,
+			default: defProps.getString('modal.cancelColor')
+		},
+		// 对调确认和取消的位置
+		buttonReverse: {
+			type: Boolean,
+			default: defProps.getBoolean('modal.buttonReverse')
+		},
+		// 是否开启缩放效果
+		zoom: {
+			type: Boolean,
+			default: defProps.getBoolean('modal.zoom')
+		},
+		// 是否异步关闭，只对确定按钮有效
+		asyncClose: {
+			type: Boolean,
+			default: defProps.getBoolean('modal.asyncClose')
+		},
+		// 是否允许点击遮罩关闭modal
+		closeOnClickOverlay: {
+			type: Boolean,
+			default: defProps.getBoolean('modal.closeOnClickOverlay')
+		},
+		// 给一个负的margin-top，往上偏移，避免和键盘重合的情况
+		negativeTop: {
+			type: [String, Number],
+			default: defProps.getAny('modal.negativeTop')
+		},
+		// modal宽度，不支持百分比，可以数值，px，rpx单位
+		width: {
+			type: [String, Number],
+			default: defProps.getAny('modal.width')
+		},
+		// 确认按钮的样式，circle-圆形，square-方形，如设置，将不会显示取消按钮
+		confirmButtonShape: {
+			type: String,
+			default: defProps.getString('modal.confirmButtonShape')
+		},
+		// 弹窗动画过度时间
+		duration: {
+			type: Number,
+			default: defProps.getNumber('modal.duration')
+		},
+		// 文案对齐方式
+		contentTextAlign: {
+			type: String,
+			default: defProps.getString('modal.contentTextAlign')
+		},
+		// 异步确定时如果点击了取消时候的提示文案
+		asyncCloseTip: {
+			type: String,
+			default: defProps.getString('modal.asyncCloseTip')
+		},
+		// 是否异步关闭，只对取消按钮有效
+		asyncCancelClose: {
+			type: Boolean,
+			default: defProps.getBoolean('modal.asyncCancelClose')
+		},
+		// 内容样式
+		contentStyle: {
+			type: Object,
+			default: defProps.getAny('modal.contentStyle')
+		},
+		customClass: {
+			type: String,
+			default: ''
+		}
+	})
+
+	const emit = defineEmits(['confirm', 'cancel', 'close', 'update:show', 'cancelOnAsync'])
+	const loading = ref(false)
+
+	const popupStyle = computed((): UTSJSONObject => {
+		const style = {} as UTSJSONObject
+		style['borderRadius'] = '6px'
+		style['overflow'] = 'hidden'
+		style['marginTop'] = '-' + addUnit(props.negativeTop)
+		return style
+	})
+
+	const modalStyle = computed((): UTSJSONObject => {
+		const style = {} as UTSJSONObject
+		style['width'] = addUnit(props.width)
+		return style
+	})
+
+	const contentTextStyle = computed((): UTSJSONObject => {
+		const style = {} as UTSJSONObject
+		style['textAlign'] = props.contentTextAlign
+		return style
+	})
+
+	const buttonGroupStyle = computed((): UTSJSONObject => {
+		const style = {} as UTSJSONObject
+		style['flexDirection'] = props.buttonReverse ? 'row-reverse' : 'row'
+		return style
+	})
+
+	const cancelTextStyle = computed((): UTSJSONObject => {
+		const style = {} as UTSJSONObject
+		style['color'] = props.cancelColor
+		return style
+	})
+
+	const confirmTextStyle = computed((): UTSJSONObject => {
+		const style = {} as UTSJSONObject
+		style['color'] = props.confirmColor
+		return style
+	})
+
+	watch((): boolean => props.show, (n: boolean) => {
+		// 为了避免第一次打开modal，又使用了异步关闭的loading
+		// 第二次打开modal时，loading依然存在的情况
+		if (n && loading.value) loading.value = false
+	})
+
+	const contentStyleCpu = computed((): UTSJSONObject => {
+		let style = props.contentStyle as UTSJSONObject;
+		style['paddingTop'] = `${props.title != '' ? 12 : 25}px`
+		return style;
+	})
+
+	// 点击确定按钮
+	const confirmHandler = (): void => {
+		// 如果配置了异步关闭，将按钮值为loading状态
+		if (props.asyncClose) {
+			loading.value = true;
+		} else {
+			emit('update:show', false)
+		}
+		emit('confirm')
+	}
+
+	// 点击取消按钮
+	const cancelHandler = (): void => {
+		// 如果点击了确定按钮，确定按钮正在请求接口执行异步操作，那么限制不能取消。
+		if (props.asyncClose && loading.value) {
+			if (props.asyncCloseTip != '') {
+				uni.showToast({
+					title: props.asyncCloseTip,
+					icon: 'none'
+				});
+			}
+			emit('cancelOnAsync')
+		} else {
+			// 如果配置了取消时异步关闭
+			if (!props.asyncCancelClose) {
+				emit('update:show', false)
+			}
+		}
+		emit('cancel')
+	}
+
+	// 点击遮罩
+	// 从原理上来说，modal的遮罩点击，并不是真的点击到了遮罩
+	// 因为modal依赖于popup的中部弹窗类型，中部弹窗比较特殊，虽有然遮罩，但是为了让弹窗内容能flex居中
+	// 多了一个透明的遮罩，此透明的遮罩会覆盖在灰色的遮罩上，所以实际上是点击不到灰色遮罩的，popup内部在
+	// 透明遮罩的子元素做了.stop处理，所以点击内容区，也不会导致误触发
+	const clickHandler = (): void => {
+		if (props.closeOnClickOverlay) {
+			emit('update:show', false)
+			emit('close')
+		}
+	}
+
+	defineExpose({
+		loading,
+		contentStyleCpu,
+		confirmHandler,
+		cancelHandler,
+		clickHandler
+	})
+</script>
+
+<style lang="scss" scoped>
+	$up-modal-border-radius: 6px;
+
+	.up-modal {
+		width: 650rpx;
+		border-radius: $up-modal-border-radius;
+		border-radius: $up-modal-border-radius;
+		overflow: hidden;
+
+		&__title {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			font-size: 16px;
+			font-weight: bold;
+			color: $up-content-color;
+			text-align: center;
+			padding-top: 25px;
+		}
+
+		&__content {
+			padding: 12px 25px 25px 25px;
+			@include flex;
+			justify-content: center;
+
+			&__text {
+				font-size: 15px;
+				color: $up-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: $up-modal-border-radius;
+				}
+				
+				&--cancel,
+				&--only-confirm {
+					border-bottom-left-radius: $up-modal-border-radius;
+				}
+
+				&--hover {
+					background-color: $up-bg-color;
+				}
+
+				&__text {
+					color: $up-content-color;
+					font-size: 16px;
+					text-align: center;
+				}
+			}
+		}
+	}
+</style>