<!-- 工具栏：全屏按钮 -->
<template>
    <span title="全屏" class="tool-fox" v-if="state.isFullScreen === false" @click="fullScreen()">
        <el-icon><el-icon-FullScreen /></el-icon>
    </span>
    <span title="退出全屏" class="tool-fox" v-if="state.isFullScreen === true" @click="outFullScreen()">
        <el-icon><el-icon-FullScreen /></el-icon>
    </span>
</template>

<script setup name="nav-tool-screen">
import {reactive} from "vue";

const state = reactive({
    isFullScreen: false // 标记是否全屏的变量
})

// 进入全屏
const fullScreen = function() {
    state.isFullScreen = true;
    if(document.documentElement.RequestFullScreen){
        document.documentElement.RequestFullScreen();
    }
    //兼容火狐
    if(document.documentElement.mozRequestFullScreen){
        document.documentElement.mozRequestFullScreen();
    }
    //兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
    if(document.documentElement.webkitRequestFullScreen){
        document.documentElement.webkitRequestFullScreen();
    }
    //兼容IE,只能写msRequestFullscreen
    if(document.documentElement.msRequestFullscreen){
        document.documentElement.msRequestFullscreen();
    }
};

// 退出全屏
const outFullScreen = function() {
    state.isFullScreen = false;
    if(document.exitFullScreen){
        document.exitFullscreen()
    }
    //兼容火狐
    if(document.mozCancelFullScreen){
        document.mozCancelFullScreen()
    }
    //兼容谷歌等
    if(document.webkitExitFullscreen){
        document.webkitExitFullscreen()
    }
    //兼容IE
    if(document.msExitFullscreen){
        document.msExitFullscreen()
    }
};

</script>

<style scoped>

</style>
