workApp/components/popupPreviewFile.vue

<template>
	<uni-popup ref="popupDialog" :is-mask-click="isMaskClick">
		<uni-icons @click="CloseDialog" class="colse" type="closeempty" size="24"></uni-icons>
		<image class="img_width" @click="CloseDialog" :src="filePath" mode="aspectFit"></image>
	</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({
		isMaskClick:{//蒙版点击是否关闭弹窗
			type: Boolean,
			default: true
		},
		filePath:{//文件路径
			type: String,
			default: ''
		}
	})
	const popupDialog = ref(null);
	//打开弹窗
	const OpenDialog = () => {
		popupDialog.value?.open();
	}
	//关闭弹框
	const CloseDialog = () => {
		popupDialog.value?.close();
	}
	defineExpose({
		OpenDialog
	})
</script>

<style scoped lang="scss">
	:deep(.maskClass){
		background-color: rgba(0, 0, 0, 0.8) !important;
	}
	.img_width{
		width: 750rpx;
		height: 80vh;
	}
	.colse{
		position: fixed;
		box-sizing: border-box;
		top: 0px;
		right: 0px;
		width: 60px;
		height: 44px;
		padding: 6px;
		line-height: 32px;
		font-size: 26px;
		color: #fff !important;
		text-align: center;
		z-index:99;
	}
</style>