menduner/src/components/PreviewImg/index.vue

<template>
  <v-overlay v-model="overlay" class="align-center justify-center" @update:model-value="handleChange">
    <div class="close" @click="overlay = false; handleChange(false)">
      <v-icon color="#fff" size="60">mdi-close-circle</v-icon>
    </div>
    <v-window v-model="window" show-arrows @update:model-value="val => window = val">
      <v-window-item v-for="val in list" :key="val">
        <!-- <v-img v-if="isImage || checkIsImage(val)" width="900" height="800" :src="val"></v-img> -->
        <div v-if="isImage || checkIsImage(val)" style="width: 70vw; height: 90vh;margin: auto;">
          <img :src="val" alt="" style="object-fit: scale-down;width: 100%; height: 100%;">
        </div>
        <video v-else :src="val" controls height="800" width="1000" preload="preload" :showPlay="true"></video>
      </v-window-item>
    </v-window>
  </v-overlay>
</template>

<script setup>
defineOptions({ name: 'preview-img'})
import { ref } from 'vue'
import { checkIsImage } from '@/utils'

const emits = defineEmits(['close'])
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  current: {
    type: Number,
    default: 0
  },
  isImage: {
    type: Boolean,
    default: false
  }
})

const overlay = ref(true)
const window = ref(0)
if (props.current) window.value = props.current

const handleChange = (e) => {
  if (!e) emits('close')
}
</script>

<style scoped lang="scss">
.close {
  position: absolute;
  right: -60px;
  top: 0;
  cursor: pointer;
}
</style>