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

7
src/components/Preview.vue
View File

@@ -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>