JavaScript控制页面全屏

文章正文还需 1 分钟

在vue-vite-admin-ts，我想加个全屏预览，记录下后来换成，import {useFullscreen} from '@vueuse/core',记录下全屏如何做

ts 复制代码

function checkFull() {
    // @ts-ignore
    let isFull = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
    return Boolean(isFull);
}

function requestFullScreen(element?: any) {
    if (!element) {
        element = document.body;
    }
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    }
}

function exitFullScreen() {
    const _document: any = document; // 以免编辑器报红
    if (_document.cancelFullScreen) {
        _document.cancelFullScreen();
    } else if (_document.mozCancelFullScreen) {
        _document.mozCancelFullScreen();
    } else if (_document.webkitCancelFullScreen) {
        _document.webkitCancelFullScreen();
    } else if (_document.msExitFullscreen) {
        _document.msExitFullscreen()
    }
}


function switchScreen() {
    let full = checkFull();
    if (full) {
        exitFullScreen();
    } else {
        requestFullScreen();
    }
}

// 兼容监听浏览器事件
function fullscreenchange(handle: Function) {
    const _document: any = document; // 以免编辑器报红
    _document.addEventListener('fullscreenchange', handle);
    _document.addEventListener('webkitfullscreenchange', handle);
    _document.addEventListener('mozfullscreenchange', handle);
    _document.addEventListener('MSFullscreenChange', handle);
}

export {
    switchScreen,
    checkFull,
    fullscreenchange
}

ts 复制代码

const toggle = () => {
	nextTick(() => {
		fullState.value = checkFull()
	})
}

html 复制代码

<CompressOutlined class="icon-svg" @click="toggle" v-if="fullState" />
<ExpandOutlined class="icon-svg" @click="toggle" v-else />