mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-23 05:40:20 +08:00
处理全屏若干问题
This commit is contained in:
parent
0e45548c06
commit
6ca702d590
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-aside class="layout-aside" :class="setCollapseWidth" v-if="clientWidth > 1000">
|
||||
<el-aside class="layout-aside" :class="setCollapseWidth" v-if="!isCurrenFullscreen && clientWidth > 1000">
|
||||
<Logo v-if="setShowLogo" />
|
||||
<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef">
|
||||
<Vertical :menuList="menuList" :class="setCollapseWidth" />
|
||||
@ -34,6 +34,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 +122,7 @@ export default {
|
||||
setCollapseWidth,
|
||||
setShowLogo,
|
||||
getThemeConfig,
|
||||
isCurrenFullscreen,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<el-header class="layout-header" :height="setHeaderHeight">
|
||||
<el-header class="layout-header sackajljfs" :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,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
@ -231,6 +231,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,
|
||||
|
@ -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);
|
||||
@ -182,9 +189,7 @@ export default {
|
||||
const item = state.tagsViewList.find((v: any) => v.path === path);
|
||||
nextTick(() => {
|
||||
router.push({ path, query: item.query });
|
||||
const element = document.querySelector('.layout-main');
|
||||
const screenfulls: any = screenfull;
|
||||
screenfulls.request(element);
|
||||
store.dispatch('tagsViewRoutes/openCurrenFullscreen');
|
||||
});
|
||||
};
|
||||
// 当前项右键菜单点击,拿当前点击的路由路径对比 浏览器缓存中的 tagsView 路由数组,取当前点击项的详细路由信息
|
||||
@ -384,6 +389,7 @@ export default {
|
||||
tagsUlRef,
|
||||
onHandleScroll,
|
||||
getThemeConfig,
|
||||
isCurrenFullscreen,
|
||||
setTagsStyle,
|
||||
refreshCurrentTagsView,
|
||||
closeCurrentTagsView,
|
||||
|
@ -65,6 +65,7 @@ export interface KeepAliveNamesState {
|
||||
// TagsView 路由列表
|
||||
export interface TagsViewRoutesState {
|
||||
tagsViewRoutes: Array<object>;
|
||||
isCurrenFullscreen: boolean;
|
||||
}
|
||||
|
||||
// 用户信息
|
||||
|
@ -1,23 +1,47 @@
|
||||
import { Module } from 'vuex';
|
||||
// 此处加上 `.ts` 后缀报错,具体原因不详
|
||||
import { TagsViewRoutesState, RootStateTypes } from '/@/store/interface/index';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import screenfull from 'screenfull';
|
||||
|
||||
const tagsViewRoutesModule: Module<TagsViewRoutesState, RootStateTypes> = {
|
||||
namespaced: true,
|
||||
state: {
|
||||
tagsViewRoutes: [],
|
||||
isCurrenFullscreen: false,
|
||||
},
|
||||
mutations: {
|
||||
// 设置 TagsView 路由
|
||||
getTagsViewRoutes(state: any, data: Array<string>) {
|
||||
state.tagsViewRoutes = data;
|
||||
},
|
||||
// 设置卡片全屏
|
||||
setCurrenFullscreen(state: any, data: boolean) {
|
||||
state.isCurrenFullscreen = data;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
// 设置 TagsView 路由
|
||||
async setTagsViewRoutes({ commit }, data: Array<string>) {
|
||||
commit('getTagsViewRoutes', data);
|
||||
},
|
||||
// 开启卡片全屏
|
||||
openCurrenFullscreen({ commit }) {
|
||||
if (!screenfull.isEnabled) {
|
||||
ElMessage.warning('暂不不支持全屏');
|
||||
return false;
|
||||
}
|
||||
screenfull.toggle();
|
||||
const currenFullscreenChange = () => {
|
||||
if (screenfull.isFullscreen) commit('setCurrenFullscreen', true);
|
||||
else {
|
||||
screenfull.off('change', currenFullscreenChange);
|
||||
commit('setCurrenFullscreen', false);
|
||||
}
|
||||
};
|
||||
screenfull.on('change', currenFullscreenChange);
|
||||
commit('setCurrenFullscreen', true);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user