admin-vben/packages/effects/common-ui/src/components/iframe/iframe.vue

39 lines
766 B
Vue

<script setup lang="ts">
import { onMounted, ref } from 'vue';
interface IFrameProps {
/** iframe 的源地址 */
src: string;
}
defineProps<IFrameProps>();
const loading = ref(true);
const height = ref('');
// @ts-expect-error: composable typing does not preserve this node schema exactly
const frameRef = ref<HTMLElement | null>(null);
function init() {
height.value = `${document.documentElement.clientHeight - 94.5}px`;
loading.value = false;
}
onMounted(() => {
setTimeout(() => {
init();
}, 300);
});
</script>
<template>
<div v-loading="loading" :style="`height:${height}`">
<iframe
ref="frameRef"
:src="src"
class="h-full w-full"
frameborder="no"
scrolling="auto"
></iframe>
</div>
</template>