From 439b134c9b54ce7fa89f7963ff1c62e79997c00a Mon Sep 17 00:00:00 2001 From: RuoYi <yzz_ivy@163.com> Date: 星期二, 23 八月 2022 20:47:41 +0800 Subject: [PATCH] 优化页面内嵌iframe切换tab不刷新数据 --- src/layout/components/InnerLink/index.vue | 67 ++++++++++++++++++++------------- 1 files changed, 40 insertions(+), 27 deletions(-) diff --git a/src/layout/components/InnerLink/index.vue b/src/layout/components/InnerLink/index.vue index cd303c4..a1c3ef6 100644 --- a/src/layout/components/InnerLink/index.vue +++ b/src/layout/components/InnerLink/index.vue @@ -1,30 +1,43 @@ -<script> -export default { - setup() { - const route = useRoute(); - const link = route.meta.link; - if (link === "") { - return "404"; - } - let url = link; - const height = document.documentElement.clientHeight - 94.5 + "px"; - const style = { height: height }; +<template> + <div :style="'height:' + height" v-loading="loading" element-loading-text="姝e湪鍔犺浇椤甸潰锛岃绋嶅�欙紒"> + <iframe + :id="iframeId" + style="width: 100%; height: 100%" + :src="src" + frameborder="no" + ></iframe> + </div> +</template> - // 杩斿洖娓叉煋鍑芥暟 - return () => - h( - "div", - { - style: style, - }, - h("iframe", { - src: url, - frameborder: "no", - width: "100%", - height: "100%", - scrolling: "auto", - }) - ); +<script setup> +const props = defineProps({ + src: { + type: String, + default: "/" }, -}; + iframeId: { + type: String + } +}); + +const height = ref(document.documentElement.clientHeight - 94.5 + "px"); +const loading = ref(false); + +onMounted(() => { + const { proxy } = getCurrentInstance() + const iframeId = ("#" + props.iframeId).replace(/\//g, "\\/"); + const iframe = document.querySelector(iframeId); + // iframe椤甸潰loading鎺у埗 + if (iframe.attachEvent) { + loading.value = true; + iframe.attachEvent("onload", function () { + proxy.loading = false; + }); + } else { + loading.value = true; + iframe.onload = function () { + proxy.loading = false; + }; + } +}) </script> -- Gitblit v1.9.3