|
@@ -1,12 +1,14 @@
|
|
|
<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" class="mr-15" @click.stop="emits('download')">mdi-arrow-down-bold-box-outline</v-icon>
|
|
|
<v-icon color="#fff" size="60">mdi-close-circle</v-icon>
|
|
|
+ <!-- <v-btn class="ml-3" color="primary" variant="outlined" prepend-icon="mdi-arrow-down-bold-box-outline" @click="handleDownloadImage" style="width: 133px">保存到本地</v-btn> -->
|
|
|
</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;">
|
|
|
+ <div v-if="isImage || checkIsImage(val)" style="width: 50vw; 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>
|
|
@@ -20,7 +22,7 @@ defineOptions({ name: 'preview-img'})
|
|
|
import { ref } from 'vue'
|
|
|
import { checkIsImage } from '@/utils'
|
|
|
|
|
|
-const emits = defineEmits(['close'])
|
|
|
+const emits = defineEmits(['download', 'close'])
|
|
|
const props = defineProps({
|
|
|
list: {
|
|
|
type: Array,
|
|
@@ -48,7 +50,7 @@ const handleChange = (e) => {
|
|
|
<style scoped lang="scss">
|
|
|
.close {
|
|
|
position: absolute;
|
|
|
- right: -60px;
|
|
|
+ right: -190px;
|
|
|
top: 0;
|
|
|
cursor: pointer;
|
|
|
}
|