feat(layouts): scale iframe-left and iframe-right (#783)

fix #777
slidevjs · Dec 12, 2022 · 1d4e2d1 · 1d4e2d1
1 parent bd45468
commit 1d4e2d1
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/packages/client/layouts/iframe-left.vue b/packages/client/layouts/iframe-left.vue
@@ -1,14 +1,26 @@
 <script setup lang="ts">
-const props = defineProps<{ class?: string; url: string }>()
+import { computed } from '@vue/reactivity'
+
+const props = defineProps<{
+  url: string
+  scale?: number
+}>()
+
+const scaleInvertPercent = computed(() => `${(1 / (props.scale || 1)) * 100}%`)
 </script>
 
 <template>
   <div class="grid grid-cols-2 w-full h-full">
-    <div class="h-full">
-      <iframe id="frame" class="w-full h-full" :src="url" />
-    </div>
+    <div relative :style="{ width: scaleInvertPercent, height: scaleInvertPercent }">
+      <iframe
+        id="frame" class="w-full h-full"
+        :src="url"
+        :style="scale ? { transform: `scale(${scale})`, transformOrigin: 'top left' } : {}"
+      />
     <div class="slidev-layout default" :class="props.class">
       <slot />
     </div>
+    </div>
   </div>
 </template>
+
diff --git a/packages/client/layouts/iframe-right.vue b/packages/client/layouts/iframe-right.vue
@@ -1,14 +1,26 @@
 <script setup lang="ts">
-const props = defineProps<{ class?: string; url: string }>()
+import { computed } from '@vue/reactivity'
+
+const props = defineProps<{
+  url: string
+  scale?: number
+}>()
+
+const scaleInvertPercent = computed(() => `${(1 / (props.scale || 1)) * 100}%`)
 </script>
 
 <template>
   <div class="grid grid-cols-2 w-full h-full">
     <div class="slidev-layout default" :class="props.class">
       <slot />
     </div>
-    <div class="h-full">
-      <iframe id="frame" class="w-full h-full" :src="url" />
+    <div relative :style="{ width: scaleInvertPercent, height: scaleInvertPercent }">
+      <iframe
+        id="frame" class="w-full h-full"
+        :src="url"
+        :style="scale ? { transform: `scale(${scale})`, transformOrigin: 'top left' } : {}"
+      />
     </div>
   </div>
 </template>
+