| 1 | <script setup lang="ts"> |
| 2 | import { computed } from 'vue' |
| 3 | |
| 4 | const props = defineProps<{ |
| 5 | url: string |
| 6 | scale?: number |
| 7 | }>() |
| 8 | |
| 9 | const scaleInvertPercent = computed(() => `${(1 / (props.scale || 1)) * 100}%`) |
| 10 | </script> |
| 11 | |
| 12 | <template> |
| 13 | <div class="grid grid-cols-2 w-full h-full"> |
| 14 | <div relative :style="{ width: scaleInvertPercent, height: scaleInvertPercent }"> |
| 15 | <iframe |
| 16 | id="frame" class="w-full h-full" |
| 17 | :src="url" |
| 18 | :style="scale ? { transform: `scale(${scale})`, transformOrigin: 'top left' } : {}" |
| 19 | /> |
| 20 | </div> |
| 21 | <div class="slidev-layout default" v-bind="$attrs"> |
| 22 | <slot /> |
| 23 | </div> |
| 24 | </div> |
| 25 | </template> |
| 26 |