'admin-21.07.26:处理全屏若干问题,pr!11,感谢群友@另一个前端'

This commit is contained in:
lyt-Top 2021-07-26 23:46:37 +08:00
parent a1be0533c4
commit b86aca5838
7 changed files with 99 additions and 23 deletions

View File

@ -1,18 +1,22 @@
<template>
<el-aside class="layout-aside" :class="setCollapseWidth" v-if="clientWidth > 1000">
<Logo v-if="setShowLogo" />
<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
<Vertical :menuList="menuList" :class="setCollapseWidth" />
</el-scrollbar>
</el-aside>
<el-drawer v-model="getThemeConfig.isCollapse" :with-header="false" direction="ltr" size="220px" v-else>
<el-aside class="layout-aside w100 h100">
<template v-if="clientWidth > 1000">
<el-aside class="layout-aside" :class="setCollapseWidth" v-show="!isCurrenFullscreen">
<Logo v-if="setShowLogo" />
<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
<Vertical :menuList="menuList" />
<Vertical :menuList="menuList" :class="setCollapseWidth" />
</el-scrollbar>
</el-aside>
</el-drawer>
</template>
<template v-else>
<el-drawer v-model="getThemeConfig.isCollapse" :with-header="false" direction="ltr" size="220px">
<el-aside class="layout-aside w100 h100">
<Logo v-if="setShowLogo" />
<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
<Vertical :menuList="menuList" />
</el-scrollbar>
</el-aside>
</el-drawer>
</template>
</template>
<script lang="ts">
@ -34,6 +38,10 @@ export default {
const getThemeConfig = computed(() => {
return store.state.themeConfig.themeConfig;
});
//
const isCurrenFullscreen = computed(() => {
return store.state.tagsViewRoutes.isCurrenFullscreen;
});
// /
const setCollapseWidth = computed(() => {
let { layout, isCollapse, menuBar } = store.state.themeConfig.themeConfig;
@ -118,6 +126,7 @@ export default {
setCollapseWidth,
setShowLogo,
getThemeConfig,
isCurrenFullscreen,
...toRefs(state),
};
},

View File

@ -1,5 +1,5 @@
<template>
<div class="layout-columns-aside">
<div class="layout-columns-aside" v-show="!isCurrenFullscreen">
<el-scrollbar>
<ul>
<li
@ -70,6 +70,10 @@ export default {
const setColumnsAsidelayout = computed(() => {
return store.state.themeConfig.themeConfig.columnsAsideLayout;
});
//
const isCurrenFullscreen = computed(() => {
return store.state.tagsViewRoutes.isCurrenFullscreen;
});
//
const setColumnsAsideMove = (k: number) => {
state.liIndex = k;
@ -152,6 +156,7 @@ export default {
setColumnsAsideStyle,
setColumnsAsidelayout,
onColumnsAsideMenuClick,
isCurrenFullscreen,
...toRefs(state),
};
},

View File

@ -1,5 +1,5 @@
<template>
<el-header class="layout-header" :height="setHeaderHeight">
<el-header class="layout-header" :height="setHeaderHeight" v-show="!isCurrenFullscreen">
<NavBarsIndex />
</el-header>
</template>
@ -19,8 +19,13 @@ export default {
if (isTagsview && layout !== 'classic') return '84px';
else return '50px';
});
//
const isCurrenFullscreen = computed(() => {
return store.state.tagsViewRoutes.isCurrenFullscreen;
});
return {
setHeaderHeight,
isCurrenFullscreen,
};
},
};

View File

@ -225,8 +225,19 @@ export default {
break;
}
};
// F11
const initOnkeydown = () => {
document.onkeydown = (event) => {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode === 122 && !state.isScreenfull) {
e.preventDefault();
onScreenfullClick();
}
};
};
//
onMounted(() => {
initOnkeydown();
if (Local.get('themeConfig')) {
initI18n();
initComponentSize();

View File

@ -1,5 +1,9 @@
<template>
<div class="layout-navbars-tagsview" :class="{ 'layout-navbars-tagsview-shadow': getThemeConfig.layout === 'classic' }">
<div
class="layout-navbars-tagsview"
:class="{ 'layout-navbars-tagsview-shadow': getThemeConfig.layout === 'classic' }"
v-show="!isCurrenFullscreen"
>
<el-scrollbar ref="scrollbarRef" @wheel.native.prevent="onHandleScroll">
<ul class="layout-navbars-tagsview-ul" :class="setTagsStyle" ref="tagsUlRef">
<li
@ -42,7 +46,6 @@
<script lang="ts">
import { toRefs, reactive, onMounted, computed, ref, nextTick, onBeforeUpdate, onBeforeMount, onUnmounted, getCurrentInstance, watch } from 'vue';
import { useRoute, useRouter, onBeforeRouteUpdate } from 'vue-router';
import screenfull from 'screenfull';
import { useStore } from '/@/store/index';
import { Session } from '/@/utils/storage';
import Sortable from 'sortablejs';
@ -75,6 +78,10 @@ export default {
const getThemeConfig = computed(() => {
return store.state.themeConfig.themeConfig;
});
//
const isCurrenFullscreen = computed(() => {
return store.state.tagsViewRoutes.isCurrenFullscreen;
});
// tagsViewList
const addBrowserSetSession = (tagsViewList: Array<object>) => {
Session.set('tagsViewList', tagsViewList);
@ -178,14 +185,13 @@ 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) => {
nextTick(() => {
router.push({ path, query: item.query });
const element = document.querySelector('.layout-main');
const screenfulls: any = screenfull;
screenfulls.request(element);
})
const { meta, name, params, query } = currentRouteInfo;
if (meta.isDynamic) router.push({ name, params });
else router.push({ path, query });
store.dispatch('tagsViewRoutes/setCurrenFullscreen');
});
};
// tagsView
const getCurrentRouteItem = (path: string) => {
@ -195,7 +201,8 @@ export default {
//
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);
@ -214,7 +221,7 @@ export default {
closeAllTagsView(path);
break;
case 4:
openCurrenFullscreen(path);
openCurrenFullscreen(path, currentRouteInfo);
break;
}
};
@ -385,6 +392,7 @@ export default {
tagsUlRef,
onHandleScroll,
getThemeConfig,
isCurrenFullscreen,
setTagsStyle,
refreshCurrentTagsView,
closeCurrentTagsView,

View File

@ -65,6 +65,7 @@ export interface KeepAliveNamesState {
// TagsView 路由列表
export interface TagsViewRoutesState {
tagsViewRoutes: Array<object>;
isCurrenFullscreen: boolean;
}
// 用户信息

View File

@ -1,4 +1,7 @@
import { Module } from 'vuex';
import { ElMessage } from 'element-plus';
import screenfull from 'screenfull';
import { Local } from '/@/utils/storage';
// 此处加上 `.ts` 后缀报错,具体原因不详
import { TagsViewRoutesState, RootStateTypes } from '/@/store/interface/index';
@ -6,18 +9,52 @@ const tagsViewRoutesModule: Module<TagsViewRoutesState, RootStateTypes> = {
namespaced: true,
state: {
tagsViewRoutes: [],
isCurrenFullscreen: false,
},
mutations: {
// 设置 TagsView 路由
getTagsViewRoutes(state: any, data: Array<string>) {
state.tagsViewRoutes = data;
},
// 设置卡片全屏
getCurrenFullscreen(state: any, data: boolean) {
state.isCurrenFullscreen = data;
},
},
actions: {
// 设置 TagsView 路由
async setTagsViewRoutes({ commit }, data: Array<string>) {
commit('getTagsViewRoutes', data);
},
// 设置卡片全屏
setCurrenFullscreen({ commit }) {
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)`;
}
}
};
screenfulls.on('change', currenFullscreenChange);
commit('getCurrenFullscreen', true);
},
},
};