el-image-viewer组件无法触发右上角关闭按钮事件

el-image-viewer组件无法触发右上角关闭按钮事件

解决方法：使用@close="closeImgViewer"替代 :on-close=“closeImgViewer”
如下图：

代码：

<div class="image-box" v-if="formData.identityCardFront"
	@click="openReview(formData.identityCardFront.fileUrl)">
			
<el-image style="width: 100%; height: 100%" :src="formData.identityCardFront.fileUrl"
fit="contain" />
</div>


<el-image-viewer
  	  v-if="dialogVisible"
      @close="closeImgViewer"
      :url-list="imagePreviewUrls"
      :initial-index="initialImgPreviewIndex"
 />

 const initialImgPreviewIndex = ref(0) // 预览打开看到的图片下标
 const imagePreviewUrls = ref([])
const dialogVisible = ref(false)
const formData = reactive<Object>({
files: []，
identityCardFront： {}
})

	function openReview(url) {
			var arr = []
		for (let i =0; i<formData.files.length; i++) {
			var item = formData.files[i]
			arr.push(item.fileUrl)
			
			if (item.fileUrl == url) {
				initialImgPreviewIndex.value = i
			}
		}
		imagePreviewUrls.value = arr
		dialogVisible.value = true
	}

function closeImgViewer () {
	     dialogVisible.value = false
	    }

.image-box {
		height: 146px;
		width: 146px;
		background-color: #fafafa;
		border-radius: 6px;
		justify-content: center;
		padding: 4px;
		border: 1px dashed #cdd0d6;

	}