1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
| <template>
| <basic-container>
| <iframe :src="src" class="iframe" ref="iframe" />
| </basic-container>
| </template>
|
| <script>
| import NProgress from 'nprogress'; // progress bar
| import 'nprogress/nprogress.css'; // progress bar style
| export default {
| name: 'AvueIframe',
| data() {
| return {};
| },
| created() {
| NProgress.configure({ showSpinner: false });
| },
| mounted() {
| this.load();
| },
| watch: {
| $route: function () {
| this.load();
| },
| },
| computed: {
| src() {
| return this.$route.query.url.replace(/#/g, '&');
| },
| },
| methods: {
| // 显示等待框
| show() {
| NProgress.start();
| },
| // 隐藏等待狂
| hide() {
| NProgress.done();
| },
| // 加载组件
| load() {
| this.show();
| //超时3s自动隐藏等待狂，加强用户体验
| let time = 3;
| const timeFunc = setInterval(() => {
| time--;
| if (time == 0) {
| this.hide();
| clearInterval(timeFunc);
| }
| }, 1000);
| this.iframeInit();
| },
| //iframe窗口初始化
| iframeInit() {
| const iframe = this.$refs.iframe;
| const clientHeight = document.documentElement.clientHeight - 150;
| if (!iframe) return;
| iframe.style.height = `${clientHeight}px`;
| if (iframe.attachEvent) {
| iframe.attachEvent('onload', () => {
| this.hide();
| });
| } else {
| iframe.onload = () => {
| this.hide();
| };
| }
| },
| },
| };
| </script>
|
| <style lang="scss">
| .iframe {
| width: 100%;
| height: 100%;
| border: 0;
| overflow: hidden;
| box-sizing: border-box;
| }
| </style>
|
|
