vue3 element-plus 图片预览

一、效果图

hover 点击预览

二、代码

<template>
	<div class="box" @click="emits('change')" :style="{ width: size + 'px', height: size + 'px' }">
		<el-image :src="props.src" fit="scale-down" :style="{ width: size + 'px', height: size + 'px' }">
			<!-- 图片加载失败中定义展示内容 -->
			<!-- <template #error>
				<div class="flex align-middle">
					<el-icon><Picture /></el-icon>
				</div>
			</template> -->
		</el-image>
		<div class="mask">
			<el-icon :size="20" @click="open" class="icon">
				<ZoomIn />
			</el-icon>
		</div>
	</div>
	<el-image-viewer v-if="dialogVisible" :url-list="[props.src]" hide-on-click-modal teleported close-on-press-escape @close="handleClose" />
</template>

<script setup lang="ts">
const props = defineProps({
	src: {
		type: String,
		default: '',
	},
	size: {
		type: String,
	},
});
const emits = defineEmits(['change', 'update:modelValue']);
const dialogVisible = ref(false);
const open = () => {
	dialogVisible.value = true;
};
const handleClose = () => {
	dialogVisible.value = false;
};
</script>

<style lang="scss" scoped>
.box {
	position: relative;
	border-radius: 7px;

	.mask {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: none;
		background: rgba(58, 58, 58, 0.5);
		width: 100%;
		height: 100%;
		color: #fff;
		justify-content: center;
		align-items: center;
		border-radius: 7px;
		.icon {
			cursor: pointer;
		}
	}
	&:hover {
		.mask {
			display: flex;
		}
	}
}
</style>