ImgPreview 图片预览

单张图的预览使用 <wd-img></wd-img> 即可，如果需要预览多张图可使用当前组件

参数定义

参数	类型	是否必填	默认值	说明
urls	Array	是	无	图片地址

事件定义

事件名	参数	说明
close	-	点击图片关闭时触发

代码示例

<template>
	<wd-img
		custom-class="imgView"
		:width="220"
		:height="120"
		src="https://jeecgos.oss-cn-beijing.aliyuncs.com/files/site/projectCase/mini/banner/10bdc1.jpg"
		@click="() => (imgPreview.show = true)"
	></wd-img>
	<ImgPreview v-if="imgPreview.show" :urls="imgPreview.urls" @close="() => (imgPreview.show = false)"></ImgPreview>
</template>

<script>
import { ref } from 'vue';
// 图片预览
const imgPreview = ref({
	show: false,
	urls: [
		'https://jeecgos.oss-cn-beijing.aliyuncs.com/files/site/projectCase/mini/banner/10bdc1.jpg',
		'https://static.jeecg.com/files/app_logo.png'
	]
});
</script>

效果