canrd-outside / order-erp-front · Commits

Commit d76cfd7f809ba48880c950a64cb43a5c9c44176c

Authored by yanzhuang
Committed by GitHub
1 parent 2fd0fd28

fix: fix iframe heigth error (#1012)

Inline Side-by-side
Showing 1 changed file with 14 additions and 30 deletions
src/views/sys/iframe/index.vue
  View file @d76cfd7
1 1 <template>
2 2 <div :class="prefixCls" :style="getWrapStyle">
3 3 <Spin :spinning="loading" size="large" :style="getWrapStyle">
4   - <iframe :src="frameSrc" :class="`${prefixCls}__main`" ref="frameRef"></iframe>
  4 + <iframe
  5 + :src="frameSrc"
  6 + :class="`${prefixCls}__main`"
  7 + ref="frameRef"
  8 + @load="hideLoading"
  9 + ></iframe>
5 10 </Spin>
6 11 </div>
7 12 </template>
8 13 <script lang="ts">
9 14 import type { CSSProperties } from 'vue';
10   - import { defineComponent, ref, unref, onMounted, nextTick, computed } from 'vue';
  15 + import { defineComponent, ref, unref, computed } from 'vue';
11 16 import { Spin } from 'ant-design-vue';
12 17  
13   - import { getViewportOffset } from '/@/utils/domUtils';
14   -
15 18 import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
16 19  
17 20 import { propTypes } from '/@/utils/propTypes';
18 21 import { useDesign } from '/@/hooks/web/useDesign';
  22 + import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight';
19 23  
20 24 export default defineComponent({
21 25 name: 'IFrame',
... ... @@ -24,10 +28,11 @@
24 28 frameSrc: propTypes.string.def(''),
25 29 },
26 30 setup() {
27   - const loading = ref(false);
  31 + const loading = ref(true);
28 32 const topRef = ref(50);
29 33 const heightRef = ref(window.innerHeight);
30   - const frameRef = ref<HTMLFrameElement | null>(null);
  34 + const frameRef = ref<HTMLFrameElement>();
  35 + const { headerHeightRef } = useLayoutHeight();
31 36  
32 37 const { prefixCls } = useDesign('iframe-page');
33 38 useWindowSizeFn(calcHeight, 150, { immediate: true });
... ... @@ -43,8 +48,7 @@
43 48 if (!iframe) {
44 49 return;
45 50 }
46   - let { top } = getViewportOffset(iframe);
47   - top += 20;
  51 + const top = headerHeightRef.value;
48 52 topRef.value = top;
49 53 heightRef.value = window.innerHeight - top;
50 54 const clientHeight = document.documentElement.clientHeight - top;
... ... @@ -56,33 +60,13 @@
56 60 calcHeight();
57 61 }
58 62  
59   - function init() {
60   - nextTick(() => {
61   - const iframe = unref(frameRef);
62   - if (!iframe) return;
63   -
64   - const _frame = iframe as any;
65   - if (_frame.attachEvent) {
66   - _frame.attachEvent('onload', () => {
67   - hideLoading();
68   - });
69   - } else {
70   - iframe.onload = () => {
71   - hideLoading();
72   - };
73   - }
74   - });
75   - }
76   - onMounted(() => {
77   - loading.value = true;
78   - init();
79   - });
80   -
81 63 return {
82 64 getWrapStyle,
83 65 loading,
84 66 frameRef,
85 67 prefixCls,
  68 +
  69 + hideLoading,
86 70 };
87 71 },
88 72 });
... ...