'admin-21.07.07:优化内嵌iframe、外链，解决tagsView刷新问题'

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 🎉🎉🔥 `vue-next-admin` 基于 vue3.x 、Typescript、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
 
+## 1.0.10
+
+`2021.07.07`
+
+- 🌟 更新 依赖更新最新版本（字体图标无问题）
+- 🎯 优化 内嵌 iframe、外链，解决 tagsView 刷新问题
+
 ## 1.0.9
 
 `2021.07.02`

src/layout/component/main.vue

@@ -3,68 +3,53 @@
 		<el-scrollbar
 			class="layout-scrollbar"
 			ref="layoutScrollbarRef"
-			v-if="!currentRouteMeta.isLink && !currentRouteMeta.isIframe"
-			:style="{ minHeight: `calc(100vh - ${headerHeight}` }"
+			:style="{
+				minHeight: `calc(100vh - ${headerHeight}`,
+				padding: currentRouteMeta.isLink && currentRouteMeta.isIframe ? 0 : '',
+				transition: 'padding 0.3s ease-in-out',
+			}"
 		>
 			<LayoutParentView />
 			<Footer v-if="getThemeConfig.isFooter" />
 		</el-scrollbar>
-		<Link :style="{ height: `calc(100vh - ${headerHeight}` }" :meta="currentRouteMeta" v-if="currentRouteMeta.isLink && !currentRouteMeta.isIframe" />
-		<Iframes
-			:style="{ height: `calc(100vh - ${headerHeight}` }"
-			:meta="currentRouteMeta"
-			v-if="currentRouteMeta.isLink && currentRouteMeta.isIframe && isShowLink"
-			@getCurrentRouteMeta="onGetCurrentRouteMeta"
-		/>
 	</el-main>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, toRefs, reactive, getCurrentInstance, watch, onBeforeMount } from 'vue';
-import { useRoute } from 'vue-router';
 import { useStore } from '/@/store/index';
+import { useRoute } from 'vue-router';
 import LayoutParentView from '/@/layout/routerView/parent.vue';
 import Footer from '/@/layout/footer/index.vue';
-import Link from '/@/layout/routerView/link.vue';
-import Iframes from '/@/layout/routerView/iframes.vue';
 export default defineComponent({
 	name: 'layoutMain',
-	components: { LayoutParentView, Footer, Link, Iframes },
+	components: { LayoutParentView, Footer },
 	setup() {
 		const { proxy } = getCurrentInstance() as any;
-		const store = useStore();
 		const route = useRoute();
+		const store = useStore();
 		const state = reactive({
 			headerHeight: '',
 			currentRouteMeta: {},
-			isShowLink: false,
 		});
 		// 获取布局配置信息
 		const getThemeConfig = computed(() => {
 			return store.state.themeConfig.themeConfig;
 		});
-		// 子组件触发更新
-		const onGetCurrentRouteMeta = () => {
-			initCurrentRouteMeta(route.meta);
-		};
-		// 初始化当前路由 meta 信息
-		const initCurrentRouteMeta = (meta: object) => {
-			state.isShowLink = false;
-			state.currentRouteMeta = meta;
-			setTimeout(() => {
-				state.isShowLink = true;
-			}, 100);
-		};
 		// 设置 main 的高度
 		const initHeaderHeight = () => {
 			let { isTagsview } = store.state.themeConfig.themeConfig;
 			if (isTagsview) return (state.headerHeight = `84px`);
 			else return (state.headerHeight = `50px`);
 		};
+		// 初始化获取当前路由 meta，用于设置 iframes padding
+		const initGetMeta = () => {
+			state.currentRouteMeta = route.meta;
+		};
 		// 页面加载前
 		onBeforeMount(() => {
-			initCurrentRouteMeta(route.meta);
 			initHeaderHeight();
+			initGetMeta();
 		});
 		// 监听 themeConfig 配置文件的变化，更新菜单 el-scrollbar 的高度
 		watch(store.state.themeConfig.themeConfig, (val) => {
@@ -74,17 +59,15 @@ export default defineComponent({
 				proxy.$refs.layoutScrollbarRef.update();
 			}
 		});
-		// 监听路由的变化
+		// 监听路由变化
 		watch(
 			() => route.path,
 			() => {
-				initCurrentRouteMeta(route.meta);
+				state.currentRouteMeta = route.meta;
 			}
 		);
 		return {
 			getThemeConfig,
-			initCurrentRouteMeta,
-			onGetCurrentRouteMeta,
 			...toRefs(state),
 		};
 	},

src/layout/routerView/iframes.vue

@@ -1,31 +1,26 @@
 <template>
-	<div>
-		<div class="layout-view-bg-white flex h100" v-loading="iframeLoading">
-			<iframe :src="iframeUrl" frameborder="0" height="100%" width="100%" id="iframe" v-show="!iframeLoading"></iframe>
-		</div>
+	<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${iframeHeight}`, border: 'none' }" v-loading="iframeLoading">
+		<iframe :src="iframeUrl" frameborder="0" height="100%" width="100%" id="iframe" v-show="!iframeLoading"></iframe>
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, onMounted, onBeforeMount, onUnmounted, nextTick, getCurrentInstance } from 'vue';
+import { defineComponent, reactive, toRefs, onMounted, nextTick, watch } from 'vue';
 import { useRoute } from 'vue-router';
+import { useStore } from '/@/store/index';
 export default defineComponent({
 	name: 'layoutIfameView',
-	props: {
-		meta: {
-			type: Object,
-			default: () => {},
-		},
-	},
-	setup(props, { emit }) {
-		const { proxy } = getCurrentInstance() as any;
+	setup() {
 		const route = useRoute();
+		const store = useStore();
 		const state = reactive({
 			iframeLoading: true,
 			iframeUrl: '',
+			iframeHeight: '',
 		});
 		// 初始化页面加载 loading
 		const initIframeLoad = () => {
+			state.iframeUrl = route.meta.isLink;
 			nextTick(() => {
 				state.iframeLoading = true;
 				const iframe = document.getElementById('iframe');
@@ -35,22 +30,24 @@ export default defineComponent({
 				};
 			});
 		};
-		// 页面加载前
-		onBeforeMount(() => {
-			state.iframeUrl = props.meta.isLink;
-			proxy.mittBus.on('onTagsViewRefreshRouterView', (path: string) => {
-				if (route.path !== path) return false;
-				emit('getCurrentRouteMeta');
-			});
-		});
+		// 设置 iframe 的高度
+		const initIframeHeight = () => {
+			let { isTagsview } = store.state.themeConfig.themeConfig;
+			if (isTagsview) return (state.iframeHeight = `84px`);
+			else return (state.iframeHeight = `20px`);
+		};
 		// 页面加载时
 		onMounted(() => {
 			initIframeLoad();
+			initIframeHeight();
 		});
-		// 页面卸载时
-		onUnmounted(() => {
-			proxy.mittBus.off('onTagsViewRefreshRouterView', () => {});
-		});
+		// 监听路由变化，多个 iframe 时使用
+		watch(
+			() => route.path,
+			() => {
+				initIframeLoad();
+			}
+		);
 		return {
 			...toRefs(state),
 		};

src/layout/routerView/link.vue

@@ -1,28 +1,41 @@
 <template>
-	<div class="layout-scrollbar">
-		<div class="layout-view-bg-white flex layout-view-link">
-			<a :href="currentRouteMeta.isLink" target="_blank" class="flex-margin">{{ currentRouteMeta.title }}：{{ currentRouteMeta.isLink }}</a>
-		</div>
+	<div class="layout-view-bg-white flex layout-view-link" :style="{ height: `calc(100vh - ${linkHeight}` }">
+		<a href="https://element-plus.gitee.io/#/zh-CN/component/installation" target="_blank" class="flex-margin"
+			>{{ currentRouteMeta.title }}：{{ currentRouteMeta.isLink }}</a
+		>
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
+import { defineComponent, toRefs, reactive, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from '/@/store/index';
 export default defineComponent({
 	name: 'layoutLinkView',
-	props: {
-		meta: {
-			type: Object,
-			default: () => {},
-		},
-	},
-	setup(props) {
-		// 获取父级菜单数据
-		const currentRouteMeta = computed(() => {
-			return props.meta;
+	setup() {
+		const route = useRoute();
+		const store = useStore();
+		const state = reactive({
+			currentRouteMeta: {},
+			linkHeight: '',
+		});
+		// 初始化获取当前路由 meta
+		const initGetMeta = () => {
+			state.currentRouteMeta = route.meta;
+		};
+		// 设置 iframe 的高度
+		const initLinkHeight = () => {
+			let { isTagsview } = store.state.themeConfig.themeConfig;
+			if (isTagsview) return (state.linkHeight = `114px`);
+			else return (state.linkHeight = `50px`);
+		};
+		// 页面加载时
+		onMounted(() => {
+			initGetMeta();
+			initLinkHeight();
 		});
 		return {
-			currentRouteMeta,
+			...toRefs(state),
 		};
 	},
 });

src/router/route.ts

@@ -850,7 +850,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 			{
 				path: '/link',
 				name: 'layoutLinkView',
-				component: () => import('/@/layout/routerView/parent.vue'),
+				component: () => import('/@/layout/routerView/link.vue'),
 				meta: {
 					title: 'message.router.layoutLinkView',
 					isLink: 'https://element-plus.gitee.io/#/zh-CN/component/installation',
@@ -865,7 +865,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 			{
 				path: '/iframes',
 				name: 'layoutIfameView',
-				component: () => import('/@/layout/routerView/parent.vue'),
+				component: () => import('/@/layout/routerView/iframes.vue'),
 				meta: {
 					title: 'message.router.layoutIfameView',
 					isLink: 'https://gitee.com/lyt-top/vue-next-admin',