添加弹窗显示

src/views/notation/index.module.less

@@ -12,10 +12,12 @@
 }
 
 .previewWindow {
-  width: 100%;
+  width: 100vw;
   height: 100vh;
 
   .previewIframe {
+    width: 100vw;
     height: 100vh;
+    background-color: #fff;
   }
 }

src/views/notation/index.tsx

@@ -1,13 +1,13 @@
 import { defineComponent, onMounted, reactive, ref } from 'vue';
 import { useUserStore } from '/src/store/modules/users';
 import styles from './index.module.less';
-import PreviewWindow from '../preview-window';
 import { state } from '/src/state';
-import { NModal } from 'naive-ui';
+import { NModal, NSpin } from 'naive-ui';
 
 export default defineComponent({
   name: 'notation-a',
   setup() {
+    const show = ref(false);
     const previewModal = ref(false);
     const previewParams = ref({} as any);
     const userStore = useUserStore();
@@ -17,23 +17,26 @@ export default defineComponent({
       src: `${
         /(192|localhost)/.test(location.origin)
           ? 'https://test.lexiaoya.cn'
-          : // ? 'http://localhost:3050'
+          : // 'http://localhost:3050'
             location.origin
       }/notation/#/create?Authorization=${Authorization}`
       //   src: `http://localhost:3050/#/create?Authorization=${Authorization}`
     });
     const handleOpen = (e: MessageEvent) => {
+      console.log(e.data, 'data');
       if (e.data.api === 'notation_open') {
-        console.log(e.data, state.application);
-        console.log(previewModal.value);
-        // if (!state.application) {
-        previewModal.value = true;
-        previewParams.value = {
-          url: e.data.url
-        };
-        // } else {
-        //   window.open(e.data.url);
-        // }
+        if (state.application) {
+          show.value = true;
+          previewModal.value = true;
+          previewParams.value = {
+            url: e.data.url
+          };
+        } else {
+          window.open(e.data.url);
+        }
+      } else if (e.data.api === 'notation_exit') {
+        previewModal.value = false;
+        previewParams.value.url = '';
       }
     };
     onMounted(() => {
@@ -48,9 +51,15 @@ export default defineComponent({
           class={styles.previewWindow}
           showIcon={false}
           displayDirective="show">
-          <iframe
-            class={styles.previewIframe}
-            src={previewParams.value.url}></iframe>
+          <NSpin show={show.value} style="--n-opacity-spinning: 1;">
+            <iframe
+              class={styles.previewIframe}
+              onLoad={() => {
+                show.value = false;
+              }}
+              frameborder="0"
+              src={previewParams.value.url}></iframe>
+          </NSpin>
         </NModal>
       </div>
     );