From dfbd7a7a06f88ea36fbd667daa31b0c9b9ef6b07 Mon Sep 17 00:00:00 2001
From: wangxiaoshuang <825034831@qq.com>
Date: Thu, 6 Jun 2024 14:47:08 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=84=E8=A7=88=E6=96=87=E4=BB=B6=E5=85=A8?=
 =?UTF-8?q?=E5=B1=80=E6=96=B9=E6=B3=95=E6=B3=A8=E5=86=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Preview/fun.js    | 22 +++++++++++++++++
 src/components/Preview/index.js  |  7 ++++++
 src/components/Preview/index.vue | 41 ++++++++++++++++++++++++++++++++
 src/main.js                      |  2 ++
 4 files changed, 72 insertions(+)
 create mode 100644 src/components/Preview/fun.js
 create mode 100644 src/components/Preview/index.js
 create mode 100644 src/components/Preview/index.vue

diff --git a/src/components/Preview/fun.js b/src/components/Preview/fun.js
new file mode 100644
index 00000000..370657d7
--- /dev/null
+++ b/src/components/Preview/fun.js
@@ -0,0 +1,22 @@
+import Vue from "vue";
+import Preview from "./index.vue";
+
+const PreviewConstructor = Vue.extend(Preview);
+
+const preview = options => {
+    const { path, type, title } = options;
+    if (!path) throw `path is requred.but ${path}`
+    const id = `Preview_${new Date().getTime()}`;
+    const instance = new PreviewConstructor();
+    instance.id = id;
+    instance.vm = instance.$mount();
+    if (instance.vm.visible) return;
+    document.body.appendChild(instance.vm.$el);
+    instance.vm.open(path, type, title);
+    instance.vm.$on("closed", () => {
+        document.body.removeChild(instance.vm.$el);
+        instance.vm.$destroy();
+    });
+    return instance.vm;
+}
+export default preview;
\ No newline at end of file
diff --git a/src/components/Preview/index.js b/src/components/Preview/index.js
new file mode 100644
index 00000000..94a6d8b8
--- /dev/null
+++ b/src/components/Preview/index.js
@@ -0,0 +1,7 @@
+import Preview from "./index.vue";
+import preview from "./fun";
+
+export default Vue => {
+    Vue.component(Preview.name, Preview);
+    Vue.prototype.$preview = preview;
+};
\ No newline at end of file
diff --git a/src/components/Preview/index.vue b/src/components/Preview/index.vue
new file mode 100644
index 00000000..c44b0194
--- /dev/null
+++ b/src/components/Preview/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <el-dialog
+    v-if="visible"
+    :visible.sync="visible"
+    :title="title"
+    :fullscreen="true"
+    append-to-body
+    custom-class="base-dialog-wrapper"
+    @close="handleClose"
+  >
+    <div class="base-modal-body" style="border: 2px solid #ccc; padding: 10px">
+      <PreviewFile v-if="visible" :file-path="path" :file-type="type" />
+    </div>
+  </el-dialog>
+</template>
+<script>
+import PreviewFile from "@/components/PreviewFile";
+export default {
+  name: "preview",
+  components: { PreviewFile },
+  data() {
+    return {
+      visible: false,
+      path: null,
+      type: null,
+      title: null,
+    };
+  },
+  methods: {
+    open(path, type, title) {
+      this.path = path;
+      this.type = type;
+      this.title = title;
+      this.visible = true;
+    },
+    handleClose() {
+      this.$emit("closed");
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 70230303..cc88f482 100644
--- a/src/main.js
+++ b/src/main.js
@@ -56,6 +56,8 @@ Vue.use(hasPermi)
 // Vue.use(ElementUI, { locale, size: 'medium' })
 import upload from '@/components/element-ui/upload'
 Vue.use(upload)
+import Preview from '@/components/Preview/index'
+Vue.use(Preview)
 import adaptive from '@/directive/adaptive/index'
 // 表格自适应指令
 Vue.use(adaptive)