提取打印扫码组件

src/composables/useShowScanCode.ts

@@ -0,0 +1,34 @@
+import { createVNode, render } from 'vue';
+
+export function useShowScanCode() {
+  let container: HTMLDivElement | null = null;
+
+  const close = () => {
+    if (!container) return;
+    render(null, container);
+    container.remove();
+    container = null;
+  };
+
+  const open = async (props: { url: string; title?: string; mode?: 'img' | 'qr' }) => {
+    close();
+
+    const { default: ReportPreview } = await import('@/modules/report/ReportPreview.vue');
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+
+    const v = createVNode(ReportPreview, {
+      ...props,
+      show: true,
+      'onUpdate:show': (val: boolean) => {
+        if (!val) close();
+      },
+    });
+
+    render(v, container);
+    return close;
+  };
+
+  return { open, close };
+}

src/modules/report/ReportPreview.vue

@@ -31,6 +31,7 @@ const url = computed(() => {
     show-cancel-button
     :show-confirm-button="false"
     close-on-click-overlay
+    close-on-popstate
   >
     <div class="content">
       <qrcode-vue v-if="props.mode === 'qr'" :value="url" v-bind="config"></qrcode-vue>