From e3f3a9cc5e3c8a8137eedcbe9611a5d92aadf23b Mon Sep 17 00:00:00 2001 From: lyt <1105290566@qq.com> Date: Mon, 26 Jul 2021 17:00:04 +0800 Subject: [PATCH] =?UTF-8?q?'admin-21.07.26:=E4=BF=AE=E5=A4=8Dtagsview?= =?UTF-8?q?=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95=E7=82=B9=E5=87=BB=E5=BC=80?= =?UTF-8?q?=E5=90=AF=E5=BD=93=E5=89=8D=E9=A1=B5=E5=85=A8=E5=B1=8F=E9=97=AE?= =?UTF-8?q?=E9=A2=98'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/component/columnsAside.vue | 5 ++- src/layout/navBars/tagsView/tagsView.vue | 41 +++++++++++++++++++----- src/theme/app.scss | 1 + src/views/chart/index.vue | 4 +-- 4 files changed, 38 insertions(+), 13 deletions(-) diff --git a/src/layout/component/columnsAside.vue b/src/layout/component/columnsAside.vue index 750e55ff..a7509a8e 100644 --- a/src/layout/component/columnsAside.vue +++ b/src/layout/component/columnsAside.vue @@ -211,8 +211,8 @@ export default { position: absolute; left: 50%; top: 2px; - height: 44px; - width: 65px; + height: 50px; + width: 60px; transform: translateX(-50%); z-index: 0; transition: 0.3s ease-in-out; @@ -221,7 +221,6 @@ export default { .columns-card { @extend .columns-round; top: 0; - height: 50px; width: 100%; border-radius: 0; } diff --git a/src/layout/navBars/tagsView/tagsView.vue b/src/layout/navBars/tagsView/tagsView.vue index ed86218b..c3e7f201 100644 --- a/src/layout/navBars/tagsView/tagsView.vue +++ b/src/layout/navBars/tagsView/tagsView.vue @@ -178,23 +178,48 @@ export default { addBrowserSetSession(state.tagsViewList); }; // 6、开启当前页面全屏 - const openCurrenFullscreen = (path: string) => { - const item = state.tagsViewList.find((v: any) => v.path === path); + const openCurrenFullscreen = (path: string, currentRouteInfo: object) => { + const { meta, name, params, query } = currentRouteInfo; + if (meta.isDynamic) router.push({ name, params }); + else router.push({ path, query }); nextTick(() => { - router.push({ path, query: item.query }); - const element = document.querySelector('.layout-main'); - const screenfulls: any = screenfull; - screenfulls.request(element); + // 加延时器，防止非本界面点击 `开启当前页面全屏`，高度不对问题 + setTimeout(() => { + const element = document.body; + const aside = document.querySelector('aside'); + const header = document.querySelector('header'); + const columAside = document.querySelector('.layout-columns-aside'); + const layoutView = document.querySelector('.layout-view-bg-white'); + screenfull.on('change', () => { + if (screenfull.isFullscreen) { + if (aside) aside.style.display = `none`; + if (header) header.style.display = `none`; + if (columAside) columAside.style.display = `none`; + if (layoutView) layoutView.style.height = `calc(100vh - 30px)`; + } else { + if (aside) aside.style.display = `flex`; + if (header) header.style.display = `block`; + if (columAside) columAside.style.display = `block`; + if (!layoutView) return false; + let { isTagsview } = getThemeConfig.value; + if (isTagsview) layoutView.style.height = `calc(100vh - 114px)`; + else layoutView.style.height = `calc(100vh - 80px)`; + } + }); + screenfull.request(element); + }, 800); }); }; // 当前项右键菜单点击，拿当前点击的路由路径对比 浏览器缓存中的 tagsView 路由数组，取当前点击项的详细路由信息 const getCurrentRouteItem = (path: string) => { + if (!Session.get('tagsViewList')) return state.tagsViewList.find((v: any) => v.path === path); return Session.get('tagsViewList').find((v: any) => v.path === path); }; // 当前项右键菜单点击 const onCurrentContextmenuClick = (item) => { const { id, path } = item; - const { meta, name, params, query } = getCurrentRouteItem(path); + const currentRouteInfo = getCurrentRouteItem(path); + const { meta, name, params, query } = currentRouteInfo; switch (id) { case 0: refreshCurrentTagsView(path); @@ -213,7 +238,7 @@ export default { closeAllTagsView(path); break; case 4: - openCurrenFullscreen(path); + openCurrenFullscreen(path, currentRouteInfo); break; } }; diff --git a/src/theme/app.scss b/src/theme/app.scss index 29b9e6c2..9d449934 100644 --- a/src/theme/app.scss +++ b/src/theme/app.scss @@ -54,6 +54,7 @@ body, .el-scrollbar { width: 100%; } + // 此字段多次用到，不可删除，如需修改，请重写覆盖样式 .layout-view-bg-white { background: white; width: 100%; diff --git a/src/views/chart/index.vue b/src/views/chart/index.vue index 49fb1d72..c5c67bc0 100644 --- a/src/views/chart/index.vue +++ b/src/views/chart/index.vue @@ -1,6 +1,6 @@