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

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

View File

@ -242,6 +242,14 @@ export default {
initI18n();
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 {
getUserInfos,

View File

@ -190,7 +190,7 @@ export default {
const { meta, name, params, query } = currentRouteInfo;
if (meta.isDynamic) router.push({ name, params });
else router.push({ path, query });
store.dispatch('tagsViewRoutes/setCurrenFullscreen');
store.dispatch('tagsViewRoutes/setCurrenFullscreen', 500);
});
};
// tagsView

View File

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