Vue3 实现全屏方法_vue3全屏

浏览器自带全屏方法 document.documentElement.requestFullscreen()，和退出全屏方法document.exitFullscreen()，判断是否全屏document.fullscreenElement如果不是全屏返回null

1.定义全屏按钮，这里事引用了element-plus框架

 <div class="tabBar-right-icon" @click="fullScreen()">
                <el-icon>
                    <FullScreen />
                </el-icon>
            </div>

2.定义执行的回调函数

// 全屏方法
const fullScreen = () => {
    // 是否全屏，否为null
    let full = document.fullscreenElement
    console.log(full)
    if(!full) {
        // document自带的全屏方法
        document.documentElement.requestFullscreen()
    }else {
        // document自带的推出全屏方法
        document.exitFullscreen()
    }
}