预览文件全局方法注册

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;

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;
+};

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>

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)