xuyue/webpreview
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

use module

Browse Source
This commit is contained in:
yuetsh
2025-02-24 15:58:19 +08:00
parent 45eaa3f5fa
commit 8c4e111db1
2 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Editors.vue
View File

@@ -19,11 +19,11 @@
</template> </template>
<Editor language="css" :font-size="size" v-model:value="css" /> <Editor language="css" :font-size="size" v-model:value="css" />
</n-tab-pane> </n-tab-pane>
<n-tab-pane name="js" tab="JS"> <n-tab-pane name="js" tab="JavaScript">
<template #tab> <template #tab>
<n-flex align="center"> <n-flex align="center">
<Icon icon="skill-icons:javascript" :width="20" :height="20"></Icon> <Icon icon="skill-icons:javascript" :width="20" :height="20"></Icon>
<span>JS(需要刷新)</span> <span>JavaScript</span>
</n-flex> </n-flex>
</template> </template>
<Editor language="js" :font-size="size" v-model:value="js" /> <Editor language="js" :font-size="size" v-model:value="js" />

7
src/components/Preview.vue
View File

@@ -3,8 +3,9 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { watchDebounced } from "@vueuse/core"
import { html, css, js } from "../store.ts" import { html, css, js } from "../store.ts"
import { onMounted, useTemplateRef, watch } from "vue" import { onMounted, useTemplateRef } from "vue"
const iframe = useTemplateRef<HTMLIFrameElement>("iframe") const iframe = useTemplateRef<HTMLIFrameElement>("iframe")
@@ -23,12 +24,12 @@ function preview() {
</head> </head>
<body> <body>
${html.value} ${html.value}
<script>${js.value}<\/script> <script type="module">${js.value}<\/script>
</body> </body>
</html>`) </html>`)
doc.close() doc.close()
} }
watch([html, css], preview) watchDebounced([html, css, js], preview, { debounce: 500, maxWait: 1000 })
onMounted(preview) onMounted(preview)
</script> </script>
<style scoped> <style scoped>