当页面中某块内容需要全屏展示时,提取公共代码到@/hooks/useScreenFull.ts,同时配合vuex存储控制页面元素的展示和隐藏;
import screenfull from 'screenfull';
import {
ref, nextTick, watch } from 'vue';
import {
useStore } from '../modules/portal/store/base';
/**
* @description: 全屏hook
* @param {string} ele - document选择器,不传为body
* @return {*} isFull - 是否全屏状态;fullScreen - 全屏方法
*/
export default function useScreenFull(ele = 'body') {
const isFull = ref(false);
const store = useStore();
const fullScreen = () => {
nextTick(() => {
if (screenfull.isEnabled && !isFull.value) {
screenfull.request(document.querySelector(ele) as Element);
} else {
screenfull.toggle();
}
});
};
window.addEventListener('resize', () => {
isFull.value = (window as any).fullscreen || (document as any).webkitIsFullScreen;
});
// 监听屏幕的全屏,关闭全屏
document.addEventListener('fullscreenchange', function (event) {
if (document.fullscreenElement) {
isFull.value = true;
} else {
isFull.value = false;
}
});
watch(
() => isFull.value,
() => {
// vuex 改变全屏状态
store.commit('screenFullState$$', isFull.value);
}
);
return {
isFull,
fullScreen,
};
}
页面使用如下
//引入方法
import useScreenFull from '@/hooks/useScreenFull';
// 全屏
const {
isFull, fullScreen } = useScreenFull();
// dom
<el-button link @click="fullScreen"
><span
class="pdp_iconfont pms-margin-right--mi"
:class="isFull ? 'icon-exit' : 'icon-full'"
></span
>{
{
isFull ? '取消全屏' : '全屏' }}</el-button
>
vuex里store/base.js
import {
createStore, useStore as baseUseStore, Store } from 'vuex';
export const BASE = {
SCREEN_FULL_STATE: 'screenFullState$$', // 是否全屏
};
export interface Base {
screenFullState: boolean;
}
const base = createStore({
state() {
return {
screenFullState: false,
};
},
getters: {
[BASE.SCREEN_FULL_STATE](state: Base) {
return state.screenFullState;
},
},
mutations: {
[BASE.SCREEN_FULL_STATE](state, payload) {
state.screenFullState = payload;
},
},
});
export default base;
同时设置需要全屏的元素的height: 100%;以及需要隐藏的内容的样式height: 0px;