| | |
| | | <template> |
| | | <div :class="prefixCls" :style="getWrapStyle"> |
| | | <Spin :spinning="loading" size="large" :style="getWrapStyle"> |
| | | <iframe :src="frameSrc" :class="`${prefixCls}__main`" ref="frameRef"></iframe> |
| | | <iframe |
| | | :src="frameSrc" |
| | | :class="`${prefixCls}__main`" |
| | | ref="frameRef" |
| | | @load="hideLoading" |
| | | ></iframe> |
| | | </Spin> |
| | | </div> |
| | | </template> |
| | | <script lang="ts"> |
| | | import type { CSSProperties } from 'vue'; |
| | | import { defineComponent, ref, unref, onMounted, nextTick, computed } from 'vue'; |
| | | import { defineComponent, ref, unref, computed } from 'vue'; |
| | | import { Spin } from 'ant-design-vue'; |
| | | |
| | | import { getViewportOffset } from '/@/utils/domUtils'; |
| | | |
| | | import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn'; |
| | | |
| | | import { propTypes } from '/@/utils/propTypes'; |
| | | import { useDesign } from '/@/hooks/web/useDesign'; |
| | | import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight'; |
| | | |
| | | export default defineComponent({ |
| | | name: 'IFrame', |
| | |
| | | frameSrc: propTypes.string.def(''), |
| | | }, |
| | | setup() { |
| | | const loading = ref(false); |
| | | const loading = ref(true); |
| | | const topRef = ref(50); |
| | | const heightRef = ref(window.innerHeight); |
| | | const frameRef = ref<HTMLFrameElement | null>(null); |
| | | const frameRef = ref<HTMLFrameElement>(); |
| | | const { headerHeightRef } = useLayoutHeight(); |
| | | |
| | | const { prefixCls } = useDesign('iframe-page'); |
| | | useWindowSizeFn(calcHeight, 150, { immediate: true }); |
| | |
| | | if (!iframe) { |
| | | return; |
| | | } |
| | | let { top } = getViewportOffset(iframe); |
| | | top += 20; |
| | | const top = headerHeightRef.value; |
| | | topRef.value = top; |
| | | heightRef.value = window.innerHeight - top; |
| | | const clientHeight = document.documentElement.clientHeight - top; |
| | |
| | | calcHeight(); |
| | | } |
| | | |
| | | function init() { |
| | | nextTick(() => { |
| | | const iframe = unref(frameRef); |
| | | if (!iframe) return; |
| | | |
| | | const _frame = iframe as any; |
| | | if (_frame.attachEvent) { |
| | | _frame.attachEvent('onload', () => { |
| | | hideLoading(); |
| | | }); |
| | | } else { |
| | | iframe.onload = () => { |
| | | hideLoading(); |
| | | }; |
| | | } |
| | | }); |
| | | } |
| | | onMounted(() => { |
| | | loading.value = true; |
| | | init(); |
| | | }); |
| | | |
| | | return { |
| | | getWrapStyle, |
| | | loading, |
| | | frameRef, |
| | | prefixCls, |
| | | |
| | | hideLoading, |
| | | }; |
| | | }, |
| | | }); |