提交

src/assets/html/filePreview.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="filePreviwBox" v-if="props.isPreviw">
+    <div class="close">
+      <span @click="closePreview">
+         <van-icon name='cross'/>
+      </span>
+    </div>
+    <iframe
+      ref="iframes"
+      :src="props.url"
+      frameborder="0"
+      marginwidth="0"
+      margin-height="0"
+      scrolling="yes"
+      height="100%"
+      width="100%"
+    >
+    </iframe>
+  </div>
+</template>
+
+<script setup>
+import Base64 from "base-64";
+import {
+  ref,
+  onMounted,
+  defineProps,
+  defineEmits,
+  watch,
+  onBeforeUnmount,
+} from "vue";
+const emits = defineEmits(["closePreview"]);
+const props = defineProps({
+  url: String,
+  isPreviw: Boolean,
+});
+const iframes = ref();
+function closePreview() {
+  emits("closePre");
+}
+</script>
+
+<style lang="scss" scoped>
+.filePreviwBox {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+
+  .close {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 50px;
+    text-align: center;
+    color: #000;
+    z-index: 999999999;
+    font-size: 20px;
+    padding-top: 10px;
+    span {
+      display: inline-block;
+      width: 40px;
+      height: 40px;
+      line-height: 40px;
+      border: 1px solid #e9e9e9;
+      border-radius: 50%;
+    }
+  }
+}
+
+</style>