feat: 设置iframe地址

songxingguo · May 23, 2024 · 47c5a5e · 47c5a5e
1 parent 7c6914d
commit 47c5a5e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git a/src/.vuepress/components/react/React.vue b/src/.vuepress/components/react/React.vue
@@ -8,13 +8,11 @@
     :tab-size="2"
     :extensions="extensions"
     @ready="handleReady"
-    @change="log('change', $event)"
-    @focus="log('focus', $event)"
-    @blur="log('blur', $event)" />
-  <iframe style="width: 100%; height: 800px;"
-    ref="iframeRef"
-    src="/demo/HTMLBasic/EFileUpload.html"
-    frameborder="0"></iframe>
+    @change="onFileChange($event)" />
+  <iframe style="width: 100%; height: 400px;"
+    :src="url"
+    frameborder="0"
+    sandbox></iframe>
 </template>
 
 <script>
@@ -39,20 +37,22 @@ export default defineComponent({
       view.value = payload.view;
     };
 
-    const iframeRef = ref();
-    onMounted(() => {
-      console.log(
-        "iframeRef.value.contentDocument.documentElement.innerHTML,",
-        iframeRef.value.contentDocument.documentElement
-      );
-    });
+    let url = ref("");
+    const htmlFragment = [code.value];
+    const myBlob = new Blob(htmlFragment, { type: "text/html" });
+    url.value = URL.createObjectURL(myBlob);
+    const onFileChange = (code) => {
+      const htmlFragment = [code];
+      const myBlob = new Blob(htmlFragment, { type: "text/html" });
+      url.value = URL.createObjectURL(myBlob);
+    };
 
     return {
       code,
       extensions,
       handleReady,
-      iframeRef,
-      log: console.log,
+      onFileChange,
+      url,
     };
   },
 });

diff --git a/src/.vuepress/public/demo/HTMLBasic/EFileUpload.html b/src/.vuepress/public/demo/HTMLBasic/EFileUpload.html
@@ -16,7 +16,7 @@
     <script src="https://cdn.bootcss.com/lodash.js/4.17.11/lodash.min.js"></script>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app">哈哈哈😄</div>
 
     <script>
       const { createApp, ref, reactive } = Vue;
@@ -120,7 +120,7 @@
             fileList,
           };
         },
-        template: ` <el-upload
+        template: `<el-upload
         v-model:file-list="fileList"
         :auto-upload="false"
         :on-change="uploadChange"