fix: PresenterPrint style leak (#744)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
slidevjs · Oct 28, 2022 · 0925c30 · 0925c30
1 parent 8cbc269
commit 0925c30
Showing 1 changed file with 21 additions and 22 deletions.
diff --git a/packages/client/internals/PresenterPrint.vue b/packages/client/internals/PresenterPrint.vue
@@ -1,10 +1,29 @@
 <script setup lang="ts">
-import { useHead } from '@vueuse/head'
 import { computed } from '@vue/reactivity'
-import { rawRoutes, total } from '../logic/nav'
+import { useStyleTag } from '@vueuse/core'
+import { useHead } from '@vueuse/head'
 import { configs, themeVars } from '../env'
+import { rawRoutes, total } from '../logic/nav'
 import NoteViewer from './NoteViewer.vue'
 
+useStyleTag(`
+@page {
+  size: A4;
+  margin-top: 1.5cm;
+  margin-bottom: 1cm;
+}
+* {
+  -webkit-print-color-adjust: exact;
+}
+html,
+html body,
+html #app,
+html #page-root {
+  height: auto;
+  overflow: auto !important;
+}
+`)
+
 useHead({ title: `Notes - ${configs.title}` })
 
 const slidesWithNote = computed(() => rawRoutes
@@ -43,23 +62,3 @@ const slidesWithNote = computed(() => rawRoutes
     </div>
   </div>
 </template>
-
-<style scoped lang="postcss">
-@page {
-  size: A4;
-  margin-top: 1.5cm;
-  margin-bottom: 1cm;
-}
-
-* {
-  -webkit-print-color-adjust: exact;
-}
-
-html,
-html body,
-html #app,
-html #page-root {
-  height: auto;
-  overflow: auto !important;
-}
-</style>