预览添加hover气泡框

src/MAR/signManage/modules/preview.vue

@@ -1,5 +1,27 @@
 <template>
-  <a-button type="link" size="small" @click="open=true">预览</a-button>
+  <a-popover>
+    <template #content>
+      <div class="file-list">
+        <div
+          class="item"
+          v-for="(item, index) in utils.fileList(rowData.attinfos)"
+          :key="index"
+        >
+          <template v-if="item.fileType == 'image'">
+            <a-image
+              :src="item.url"
+              style="width: 100px; height: 100px"
+            ></a-image>
+          </template>
+          <template v-if="item.fileType == 'video'">
+            <video :src="item.url" controls style="width: 200px"></video>
+          </template>
+        </div>
+      </div>
+    </template>
+    <a-button type="link" size="small" @click="open = true">预览</a-button>
+  </a-popover>
+
   <a-drawer
     :footer="false"
     v-model:open="open"
@@ -9,36 +31,45 @@
     width="1000px"
     :closable="false"
   >
-  <div class="file-list">
-    <div class="item" v-for="(item,index) in utils.fileList(rowData.attinfos)" :key="index">
-      <template v-if="item.fileType == 'image'">
-        <a-image :src="item.url"  style="width:100px;height: 100px;"></a-image>
-      </template>
-      <template v-if="item.fileType == 'video'">
-        <video :src="item.url" controls style="width:200px"></video>
-      </template>
+    <div class="file-list">
+      <div
+        class="item"
+        v-for="(item, index) in utils.fileList(rowData.attinfos)"
+        :key="index"
+      >
+        <template v-if="item.fileType == 'image'">
+          <a-image
+            :src="item.url"
+            style="width: 100px; height: 100px"
+          ></a-image>
+        </template>
+        <template v-if="item.fileType == 'video'">
+          <video :src="item.url" controls style="width: 200px"></video>
+        </template>
+      </div>
     </div>
-  </div>
   </a-drawer>
-  </template>
+</template>
   
   <script setup>
-  import {ref, defineProps, defineEmits,watch, nextTick} from 'vue'
-  import utils from '@/utils/utils'
-  const props = defineProps(['rowData'])
-  const open = ref(false)
+import { ref, defineProps, defineEmits, watch, nextTick } from "vue";
+import utils from "@/utils/utils";
+const props = defineProps(["rowData"]);
+const open = ref(false);
 
-  watch(() => open.value,(val) => {
+watch(
+  () => open.value,
+  (val) => {
     console.log(val);
-  })
-
-  </script>
-  <style scoped>
-  .file-list {
-    display:flex;
-    flex-wrap:wrap;
   }
-  .item {
-    margin:10px;
-  }
-  </style>
+);
+</script>
+  <style scoped>
+.file-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.item {
+  margin: 10px;
+}
+</style>