12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- <script setup lang="ts">
- import { useRoute } from "vue-router";
- import { ref, unref, watch, onMounted, nextTick } from "vue";
- defineOptions({
- name: "FrameView"
- });
- const props = defineProps<{
- frameInfo?: {
- frameSrc?: string;
- fullPath?: string;
- };
- }>();
- const loading = ref(true);
- const currentRoute = useRoute();
- const frameSrc = ref<string>("");
- const frameRef = ref<HTMLElement | null>(null);
- if (unref(currentRoute.meta)?.frameSrc) {
- frameSrc.value = unref(currentRoute.meta)?.frameSrc as string;
- }
- unref(currentRoute.meta)?.frameLoading === false && hideLoading();
- 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();
- };
- }
- });
- }
- watch(
- () => currentRoute.fullPath,
- path => {
- if (
- currentRoute.name === "Redirect" &&
- path.includes(props.frameInfo?.fullPath)
- ) {
- frameSrc.value = path; // redirect时,置换成任意值,待重定向后 重新赋值
- loading.value = true;
- }
- // 重新赋值
- if (props.frameInfo?.fullPath === path) {
- frameSrc.value = props.frameInfo?.frameSrc;
- }
- }
- );
- onMounted(() => {
- init();
- });
- </script>
- <template>
- <div v-loading="loading" class="frame" element-loading-text="加载中...">
- <iframe ref="frameRef" :src="frameSrc" class="frame-iframe" />
- </div>
- </template>
- <style lang="scss" scoped>
- .frame {
- position: absolute;
- inset: 0;
- .frame-iframe {
- box-sizing: border-box;
- width: 100%;
- height: 100%;
- overflow: hidden;
- border: 0;
- }
- }
- .main-content {
- margin: 2px 0 0 !important;
- }
- </style>
|