zhibo/components/modal-popup/modal-popup.vue

<template>
	<view class="modal-popup">
		<uni-popup ref="modalPopup" is-mask-click>
			<uni-popup-dialog :type="msgType" :cancelText="showDialogOptions.cancelText"
				:confirmText="showDialogOptions.confirmText" :title="showDialogOptions.title"
				:content="showDialogOptions.content" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="popupRef" is-mask-click>
			<view class="popup-content column">
				<text class="bold colo0 mb10">权限说明</text>
				<text class="fs24 base-color-gray">{{showDialogOptions.content}}</text>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from "vue";
	name: 'modal-popup'
	const emits = defineEmits(['update:show', 'confirm', 'close'])
	const props = defineProps({
		msgType: {
			type: String,
			default: 'info'
		}
	})
	// 实例
	const modalPopup = ref(null)
	const popupRef = ref(null)
	// dialog对话框文本
	const showDialogOptions = ref({
		cancelText: '取消',
		confirmText: '确认',
		title: '提示',
		content: '',
		popType: 'dialog', //dialog:模态框,popup:无取消确认弹窗
		confirm: null,
		close: null,
	})
	/**
	 * @param {String}  cancelText:'取消'
	 * @param {String}  confirmText:'同意'
	 * @param {String}  title:'标题'
	 * @param {String}  content:'内容'
	 * @param {String}  popType:'dialog'|'popup'
	 * @param {Function}  confirm:()=>{}
	 * @param {Function}  close:()=>{}
	 */
	const open = (options = {}, upType = 'centert') => {
		for (let key in showDialogOptions.value) {
			if (options[key]) showDialogOptions.value[key] = options[key]
		}
		if (options.popType == 'dialog') {
			popupRef.value.close()
			modalPopup.value.open()
		} else if (options.popType == 'popup') {
			modalPopup.value.close()
			popupRef.value.open(upType)
		}

	}
	// 确认
	const dialogConfirm = () => {
		emits('confirm')
		if (showDialogOptions.value.confirm) {
			showDialogOptions.value.confirm()
		} else {
			modalPopup.value.close()
			popupRef.value.close()
		}
	}
	// 取消
	const dialogClose = () => {
		emits('close')
		if (showDialogOptions.value.close) {
			showDialogOptions.value.close()
		} else {
			if (showDialogOptions.value.popType == 'dialog') {
				modalPopup.value.close()
			} else if (showDialogOptions.value.popType == 'popup') {
				popupRef.value.close()
			}
		}
	}
	defineExpose({
		open,
		dialogConfirm,
		dialogClose
	})
	onMounted(() => {

	})
</script>

<style lang="scss">
	.modal-popup {
		position: fixed;
		z-index: 10099;

		.popup-content {
			position: fixed;
			left: 0;
			top: 50rpx;
			width: calc(100% - 100rpx);
			background: #fff;
			padding: 20rpx;
			margin: 30rpx;
			border-radius: 30rpx;
			box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .3);
		}
	}
</style>