按钮绝对定位

src/components/PreviewImg/index.vue

@@ -1,19 +1,21 @@
 <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" v-if="!props.hideDownload" @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 style="width: 100vw; position: relative;" class="d-flex align-center justify-center" @click.self="overlay = false; handleChange(false)">
+      <div class="close">
+        <v-icon color="#fff" size="60" class="mr-15" v-if="!props.hideDownload" @click.stop="emits('download')">mdi-arrow-down-bold-box-outline</v-icon>
+        <v-icon color="#fff" size="60" @click.self="overlay = false; handleChange(false)">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="height: 90vh;margin: auto;">
+            <img :src="val" alt="" style="object-fit: scale-down; height: 100%;">
+          </div>
+          <video v-else :src="val" controls height="800" width="1000" preload="preload" :showPlay="true"></video>
+        </v-window-item>
+      </v-window>
     </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="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>
 
@@ -53,9 +55,10 @@ const handleChange = (e) => {
 
 <style scoped lang="scss">
 .close {
-  position: absolute;
-  right: -270px;
+  position: fixed;
+  right: 80px;
   top: 0;
   cursor: pointer;
+  z-index: 2001;
 }
 </style>

src/components/PreviewImg/toolBar.vue

@@ -0,0 +1,94 @@
+<template>
+  <v-overlay v-model="overlay" @update:model-value="handleChange">
+    <div class="previewImgBox" @click.self="overlay = false; handleChange(false)">
+      <div class="close">
+        <!-- <v-icon color="#fff" size="60" class="mr-15" v-if="!props.hideDownload" @click.stop="emits('download')">mdi-arrow-down-bold-box-outline</v-icon> -->
+        <v-icon color="#fff" size="60" @click.self="overlay = false; handleChange(false)">mdi-close-circle</v-icon>
+      </div>
+      <div class="toolBar" v-if="isImage || checkIsImage(list[window])">
+        <v-icon color="#fff" size="30" v-if="!props.hideDownload" @click.stop="emits('download')">mdi-arrow-down-bold-box-outline</v-icon>
+        <v-icon color="#fff" size="30" class="ml-5" @click.stop="imgWidth+5">mdi-magnify-plus-outline</v-icon>
+        <v-icon color="#fff" size="30" class="ml-5" @click.stop="imgWidth-5">mdi-magnify-minus-outline</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" class="windowItem">
+          <div v-if="isImage || checkIsImage(val)" style="margin: auto;">
+            <!-- <img :src="val" alt="" style="object-fit: scale-down;width: 100%; height: 100%;"> -->
+            <v-img
+              :width="imgWidth"
+              cover
+              :src="val"
+            ></v-img>
+          </div>
+          <video v-else :src="val" controls height="800" width="1000" preload="preload" :showPlay="true"></video>
+        </v-window-item>
+      </v-window>
+    </div>
+  </v-overlay>
+</template>
+
+<script setup>
+defineOptions({ name: 'preview-img'})
+import { ref } from 'vue'
+import { checkIsImage } from '@/utils'
+
+const emits = defineEmits(['download', 'close'])
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  },
+  current: {
+    type: Number,
+    default: 0
+  },
+  hideDownload: {
+    type: Boolean,
+    default: false
+  },
+  isImage: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const imgWidth = ref(900)
+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">
+.previewImgBox {
+  height: 100vh;
+  width: 100vw;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.toolBar {
+  z-index: 1001;
+  position: absolute;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 10px;
+  background-color: #606266;
+  padding: 10px 30px;
+}
+.close {
+  // position: absolute;
+  // right: -270px;
+  // top: 0;
+  z-index: 1001;
+  cursor: pointer;
+  position: absolute;
+  top: 20px;
+  right: 20px;
+}
+</style>