workApp/components/customPopupDialog.vue

<template>
	<!-- 自定义弹框组件 -->
	<uni-popup ref="popupDialog" :is-mask-click="isMaskClick" style="z-index: 99999;">
		<view :class="['dialog_wrap',popupType]" :style="{ width: popupType=='center'?`${dialogWidth}rpx`:'100%' }">
			<view class="dialog_title" v-if="showTitle">
				<view class="dialog_title_lt">
					<text class="title">{{title}}</text>
				</view>
				<image v-if="showDialogClose" src="@/static/image/icon/close.png" style="width: 48rpx;height: 48rpx;"
					@click="CloseDialog"></image>
			</view>
			<view class="dialog_content">
				<slot></slot>
			</view>
			<!-- 自定义底部按钮区域 -->
			<view class="dialog_footer" v-if="showDialogFooter">
				<view v-if="showCancelBtn" class="dialog-btn cancel-btn" @click="CloseDialog">取消</view>
				<view class="dialog-btn confirm-btn" @click="handleConfirm">确定</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
	import {
		ref
	} from 'vue';

	const props = defineProps({
		showTitle: {//显示标题
			type: Boolean,
			default: true
		},
		title: {//标题
			type: String,
			default: '提示'
		},
		dialogWidth: {//弹框宽度
			type: String,
			default: '610'
		},
		isMaskClick:{//蒙版点击是否关闭弹窗
			type: Boolean,
			default: true
		},
		showDialogClose: {//关闭按钮
			type: Boolean,
			default: true
		},
		showDialogFooter:{//是否显示底部按钮
			type: Boolean,
			default: true
		},
		showCancelBtn: {//是否显示取消按钮
			type: Boolean,
			default: true
		}
	})
	const emit = defineEmits(['DialogConfirm','DialogClose']);
	const popupDialog = ref(null);
	const popupType = ref('center');//弹出方式 默认中间显示

	//打开弹窗
	const OpenDialog = (type='center') => {
		popupType.value = type;//弹出方式
		popupDialog.value.open(type);
	}
	//关闭弹窗
	const CloseDialog = () => {
		popupDialog.value.close();
		emit('DialogClose')
	}

	// 点击确定，只通知父组件，子组件不主动关闭！
	const handleConfirm = () => {
		emit('DialogConfirm')
	}

	defineExpose({
		OpenDialog,
		CloseDialog
	})
</script>

<style scoped lang="scss">
	.dialog_wrap {
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		&.bottom{//从底部弹框
			border-radius: 40rpx 40rpx 0 0;
			.dialog_title{
				background-color: #FFFFFF;
				justify-content: center;
				.dialog_title_lt {
					.title {
						color: #000000;
						font-size: 36rpx;
						margin-left: 0;
					}
				}
			}
			.dialog_content{
				padding: 0;
				min-height: auto;
			}
		}
	}

	.dialog_title {
		height: 96rpx;
		padding: 0 40rpx;
		width: 100%;
		background-color: #F5F7FA;
		border-radius: 20rpx 20rpx 0 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.dialog_title_lt {
			display: inline-flex;
			align-items: center;
			.title {
				margin-left: 16rpx;
				flex: 1;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #303133;
				font-weight: 500;
				font-size: 32rpx;
			}
		}
	}

	.dialog_content {
		min-height: 160rpx;
		height: auto;
		display: flex;
		// overflow: auto;
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx;
		flex-wrap: wrap;
	}

	.dialog_footer {
		display: flex;
		border: 2rpx solid #EBEEF5;
		padding: 24rpx 40rpx;
		width: 100%;
		box-sizing: border-box;
		gap: 20rpx;
		.dialog-btn {
			flex: 1;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			height: 80rpx;
			
			border-radius: 12rpx;
			font-size: 28rpx;
			font-weight: 500;
		}

		.cancel-btn {
			color: #606266;
			background-color: #f0f2f9;
		}

		.confirm-btn {
			color: #ffffff;
			background-color: #2e64fa;
		}
	}
</style>