<template>
    <el-image-viewer v-if="show" :url-list="(imgs as string[])" :initialIndex="index" @close="close" @cover-click="close" :z-index="10000" teleported></el-image-viewer>
</template>

<script setup name="CardItem" lang="ts">
import { propTypes } from '@/utils/propTypes';

const emit = defineEmits(['update:show']);
const props = defineProps({
    show: Boolean,
    imgs: Array,
    index: propTypes.number.def(0)
});
const close = () => {
    emit('update:show', false);
};
onMounted(() => {
    document.addEventListener('click', function (e: any) {
        if (e.target.className == 'el-image-viewer__mask') {
            close();
        }
    });
});
</script>
