use module

2025-02-24 15:58:19 +08:00
parent 45eaa3f5fa
commit 8c4e111db1
2 changed files with 6 additions and 5 deletions
--- a/src/components/Preview.vue
+++ b/src/components/Preview.vue
@@ -3,8 +3,9 @@
 </template>

 <script lang="ts" setup>
+import { watchDebounced } from "@vueuse/core"
 import { html, css, js } from "../store.ts"
-import { onMounted, useTemplateRef, watch } from "vue"
+import { onMounted, useTemplateRef } from "vue"

 const iframe = useTemplateRef<HTMLIFrameElement>("iframe")

@@ -23,12 +24,12 @@ function preview() {
  </head>
  <body>
    ${html.value}
-    <script>${js.value}<\/script>
+    <script type="module">${js.value}<\/script>
  </body>
 </html>`)
  doc.close()
 }
-watch([html, css], preview)
+watchDebounced([html, css, js], preview, { debounce: 500, maxWait: 1000 })
 onMounted(preview)
 </script>
 <style scoped>