Cuando un determinado contenido de la página deba mostrarse en pantalla completa, extraiga el código público a @/hooks/useScreenFull.ts y coopere con el almacenamiento vuex para controlar la visualización y ocultación de los elementos de la página;
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,
};
}
La página se utiliza de la siguiente manera.
//引入方法
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
>
tienda vuex/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;
Al mismo tiempo, establezca la altura: 100% del elemento que debe estar en pantalla completa y la altura del estilo: 0px del contenido que debe ocultarse;
