|
1
|
<template>
|
vben
authored
|
2
|
<div :class="prefixCls" :style="getWrapStyle">
|
|
3
|
<Spin :spinning="loading" size="large" :style="getWrapStyle">
|
|
4
5
6
7
8
9
|
<iframe
:src="frameSrc"
:class="`${prefixCls}__main`"
ref="frameRef"
@load="hideLoading"
></iframe>
|
|
10
11
12
13
|
</Spin>
</div>
</template>
<script lang="ts">
|
vben
authored
|
14
|
import type { CSSProperties } from 'vue';
|
|
15
|
import { defineComponent, ref, unref, computed } from 'vue';
|
|
16
17
|
import { Spin } from 'ant-design-vue';
|
vben
authored
|
18
|
import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
|
|
19
|
|
vben
authored
|
20
21
|
import { propTypes } from '/@/utils/propTypes';
import { useDesign } from '/@/hooks/web/useDesign';
|
|
22
|
import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight';
|
vben
authored
|
23
|
|
|
24
25
26
27
|
export default defineComponent({
name: 'IFrame',
components: { Spin },
props: {
|
vben
authored
|
28
|
frameSrc: propTypes.string.def(''),
|
|
29
30
|
},
setup() {
|
|
31
|
const loading = ref(true);
|
|
32
33
|
const topRef = ref(50);
const heightRef = ref(window.innerHeight);
|
|
34
35
|
const frameRef = ref<HTMLFrameElement>();
const { headerHeightRef } = useLayoutHeight();
|
vben
authored
|
36
37
38
39
|
const { prefixCls } = useDesign('iframe-page');
useWindowSizeFn(calcHeight, 150, { immediate: true });
|
Vben
authored
|
40
41
42
43
44
|
const getWrapStyle = computed((): CSSProperties => {
return {
height: `${unref(heightRef)}px`,
};
});
|
|
45
46
47
48
49
50
|
function calcHeight() {
const iframe = unref(frameRef);
if (!iframe) {
return;
}
|
|
51
|
const top = headerHeightRef.value;
|
|
52
53
54
55
56
57
58
|
topRef.value = top;
heightRef.value = window.innerHeight - top;
const clientHeight = document.documentElement.clientHeight - top;
iframe.style.height = `${clientHeight}px`;
}
function hideLoading() {
|
vben
authored
|
59
|
loading.value = false;
|
|
60
61
62
63
|
calcHeight();
}
return {
|
vben
authored
|
64
65
|
getWrapStyle,
loading,
|
|
66
|
frameRef,
|
vben
authored
|
67
|
prefixCls,
|
|
68
69
|
hideLoading,
|
|
70
71
72
73
74
|
};
},
});
</script>
<style lang="less" scoped>
|
vben
authored
|
75
76
77
|
@prefix-cls: ~'@{namespace}-iframe-page';
.@{prefix-cls} {
|
|
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
.ant-spin-nested-loading {
position: relative;
height: 100%;
.ant-spin-container {
width: 100%;
height: 100%;
padding: 10px;
}
}
&__mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&__main {
width: 100%;
height: 100%;
overflow: hidden;
|
Vben
authored
|
101
|
background-color: @component-background;
|
|
102
103
104
105
106
|
border: 0;
box-sizing: border-box;
}
}
</style>
|