|
@@ -0,0 +1,58 @@
|
|
|
+<template>
|
|
|
+ <div class="frame" v-loading="loading">
|
|
|
+ <iframe :src="frameSrc" class="frame-iframe" ref="frameRef"></iframe>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script lang="ts" setup>
|
|
|
+import { ref, unref, onMounted, nextTick } from "vue";
|
|
|
+import { useRoute } from "vue-router";
|
|
|
+
|
|
|
+const currentRoute = useRoute();
|
|
|
+const loading = ref(false);
|
|
|
+const frameRef = ref<HTMLElement | null>(null);
|
|
|
+const frameSrc = ref<string>("");
|
|
|
+
|
|
|
+if (unref(currentRoute.meta)?.frameSrc) {
|
|
|
+ frameSrc.value = unref(currentRoute.meta)?.frameSrc as string;
|
|
|
+}
|
|
|
+
|
|
|
+function hideLoading() {
|
|
|
+ loading.value = false;
|
|
|
+}
|
|
|
+
|
|
|
+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();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.frame {
|
|
|
+ height: 100vh;
|
|
|
+
|
|
|
+ &-iframe {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|