| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <script lang="ts" setup> |
| H | 2 | import { propTypes } from '@/utils/propTypes' |
| 3 | ||
| 4 | defineOptions({ name: 'IFrame' }) | |
| 5 | ||
| 6 | const props = defineProps({ | |
| 7 | src: propTypes.string.def('') | |
| 8 | }) | |
| 9 | const loading = ref(true) | |
| 10 | const frameRef = ref<HTMLElement | null>(null) | |
| 11 | const init = () => { | |
| 9259c2 | 12 | nextTick(() => { |
| H | 13 | loading.value = true |
| 14 | if (!frameRef.value) return | |
| 15 | frameRef.value.onload = () => { | |
| 16 | loading.value = false | |
| 17 | } | |
| 18 | }) | |
| 820397 | 19 | } |
| H | 20 | onMounted(() => { |
| 9259c2 | 21 | init() |
| 820397 | 22 | }) |
| 9259c2 | 23 | watch( |
| H | 24 | () => props.src, |
| 25 | () => { | |
| 26 | init() | |
| 27 | } | |
| 28 | ) | |
| 820397 | 29 | </script> |
| H | 30 | <template> |
| 9259c2 | 31 | <div |
| H | 32 | v-loading="loading" |
| 33 | class="w-full h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-2px)]" | |
| 34 | > | |
| 820397 | 35 | <iframe |
| H | 36 | ref="frameRef" |
| 37 | :src="props.src" | |
| 9259c2 | 38 | frameborder="0" |
| 820397 | 39 | scrolling="auto" |
| 9259c2 | 40 | height="100%" |
| H | 41 | width="100%" |
| 42 | allowfullscreen="true" | |
| 43 | webkitallowfullscreen="true" | |
| 44 | mozallowfullscreen="true" | |
| 820397 | 45 | ></iframe> |
| H | 46 | </div> |
| 47 | </template> | |
