hjq/mart-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

!12 处理图表页全屏后无法渲染的问题

Browse Source 
Merge pull request !12 from MaxNull/dev-20210727
This commit is contained in:
lyt-Top 2021-07-27 02:33:54 +00:00 committed by Gitee
commit 92db3f6335
3 changed files with 33 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/layout/navBars/breadcrumb/user.vue
View File

@ -242,6 +242,14 @@ export default {
initI18n(); initI18n();
initComponentSize(); initComponentSize();
} }
document.onkeydown = (event) => {
var e = event || window.event || arguments.callee.caller.arguments[0];
// 阻止F11全屏
if (e && e.keyCode === 122 && !state.isScreenfull) {
e.preventDefault();
onScreenfullClick();
}
};
}); });
return { return {
getUserInfos, getUserInfos,

2
src/layout/navBars/tagsView/tagsView.vue
View File

@ -190,7 +190,7 @@ export default {
const { meta, name, params, query } = currentRouteInfo; const { meta, name, params, query } = currentRouteInfo;
if (meta.isDynamic) router.push({ name, params }); if (meta.isDynamic) router.push({ name, params });
else router.push({ path, query }); else router.push({ path, query });
store.dispatch('tagsViewRoutes/setCurrenFullscreen'); store.dispatch('tagsViewRoutes/setCurrenFullscreen', 500);
}); });
}; };
// 当前项右键菜单点击，拿当前点击的路由路径对比 浏览器缓存中的 tagsView 路由数组，取当前点击项的详细路由信息 // 当前项右键菜单点击，拿当前点击的路由路径对比 浏览器缓存中的 tagsView 路由数组，取当前点击项的详细路由信息

45
src/store/modules/tagsViewRoutes.ts
View File

@ -4,6 +4,8 @@ import screenfull from 'screenfull';
import { Local } from '/@/utils/storage'; import { Local } from '/@/utils/storage';
// 此处加上 `.ts` 后缀报错，具体原因不详 // 此处加上 `.ts` 后缀报错，具体原因不详
import { TagsViewRoutesState, RootStateTypes } from '/@/store/interface/index'; import { TagsViewRoutesState, RootStateTypes } from '/@/store/interface/index';
import { ElMessage } from 'element-plus';
import screenfull from 'screenfull';
const tagsViewRoutesModule: Module<TagsViewRoutesState, RootStateTypes> = { const tagsViewRoutesModule: Module<TagsViewRoutesState, RootStateTypes> = {
namespaced: true, namespaced: true,
@ -27,33 +29,34 @@ const tagsViewRoutesModule: Module<TagsViewRoutesState, RootStateTypes> = {
commit('getTagsViewRoutes', data); commit('getTagsViewRoutes', data);
}, },
// 设置卡片全屏 // 设置卡片全屏
setCurrenFullscreen({ commit }) { setCurrenFullscreen({ commit }, timeout: number = 0) {
const screenfulls: any = screenfull; const screenfulls: any = screenfull;
if (!screenfulls.isEnabled) { if (!screenfulls.isEnabled) {
ElMessage.warning('暂不不支持全屏'); ElMessage.warning('暂不不支持全屏');
return false; return false;
} }
screenfulls.toggle(); setTimeout(() => {
const currenFullscreenChange = () => { const currenFullscreenChange = () => {
const layoutViewBgWhite = document.querySelector('.layout-view-bg-white') as HTMLElement; const layoutViewBgWhite = document.querySelector('.layout-view-bg-white') as HTMLElement;
if (screenfulls.isFullscreen) { if (screenfulls.isFullscreen) {
commit('getCurrenFullscreen', true); commit('getCurrenFullscreen', true);
// 设置全屏时，设置有 `layout-view-bg-white` 类的高度 // 设置全屏时，设置有 `layout-view-bg-white` 类的高度
if (layoutViewBgWhite) layoutViewBgWhite.style.height = `calc(100vh - 30px)`; if (layoutViewBgWhite) layoutViewBgWhite.style.height = `calc(100vh - 30px)`;
} else { } else {
screenfulls.off('change', currenFullscreenChange); screenfulls.off('change', currenFullscreenChange);
commit('getCurrenFullscreen', false); commit('getCurrenFullscreen', false);
if (!layoutViewBgWhite) return false; if (!layoutViewBgWhite) return false;
const getThemeConfig = Local.get('themeConfig'); const getThemeConfig = Local.get('themeConfig');
if (getThemeConfig) { if (getThemeConfig) {
let { isTagsview } = getThemeConfig; let { isTagsview } = getThemeConfig;
if (isTagsview) layoutViewBgWhite.style.height = `calc(100vh - 114px)`; if (isTagsview) layoutViewBgWhite.style.height = `calc(100vh - 114px)`;
else layoutViewBgWhite.style.height = `calc(100vh - 80px)`; else layoutViewBgWhite.style.height = `calc(100vh - 80px)`;
}
} }
} };
}; screenfulls.on('change', currenFullscreenChange);
screenfulls.on('change', currenFullscreenChange); screenfulls.toggle();
commit('getCurrenFullscreen', true); }, timeout);
}, },
}, },
}; };