workApp/components/popup-dialog.vue

<template>
	<!-- 提示框 可自定义内容-->
	<uni-popup ref="popupDialog" type="dialog">
		<uni-popup-dialog :class="{'white':!showTitle,'footBorder':showFootBorder}" :showClose="showCloseBtn" :style="{'width': `${dialogWidth}rpx`}" @confirm="DialogConfirm" @close="CloseDialog">
			<view class="dialog_title" v-if="showTitle">
				<view class="dialog_title_lt">
					<image v-if="popType=='alert'" src="@/static/image/icon/icon_warn.png" style="width: 40rpx;height: 40rpx;"></image>
					<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 alert" v-if="popType=='alert'">{{content}}</view>
			<view class="dialog_content" v-else style="height: auto;"><slot></slot></view>
		</uni-popup-dialog>
	</uni-popup>
</template>

<script setup>
	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
	import uniPopupDialog from '@/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue';
	import { ref } from 'vue';
	const props = defineProps({
		showTitle:{//是否显示标题
			type:Boolean,
			default:true
		},
		title:{//标题
			type: String,
			default: '提示'
		},
		content:{//提示框内容
			type: String,
			default: ''
		},
		popType:{//custom 自定义
			type: String,
			default: 'alert'
		},
		dialogWidth:{//弹框宽度
			type: String,
			default: '610'
		},
		showDialogClose:{//是否显示关闭按钮
			type:Boolean,
			default:true
		},
		showCloseBtn:{//是否显示取消按钮
			type:Boolean,
			default:true
		},
		showFootBorder:{//foot是否显示上边框
			type:Boolean,
			default:false
		}
	})
	const emit = defineEmits(['DialogConfirm']);
	//删除提示框
	const popupDialog = ref(null);
	//打开弹框
	const OpenDialog = () => {
		popupDialog.value.open();
	}
	//关闭按钮、取消按钮
	const CloseDialog = () => {
		popupDialog.value.close();
	}
	//点击dialog确定按钮触发	
	const DialogConfirm = () => {
		emit('DialogConfirm')
	}
	//暴露方法被父组件调用
	defineExpose({
		OpenDialog
	})
</script>

<style scoped lang="scss">
	
</style>