feat: add iframe router

This commit is contained in:
一万
2022-03-02 11:15:51 +08:00
committed by GitHub
parent 37762e45fd
commit e3fda52801
6 changed files with 105 additions and 3 deletions

58
src/layout/frameView.vue Normal file
View File

@@ -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>