vue项目全屏展示

1：全屏展示页面所有内容

<span  style="color:#918F8F" @click="clickFun">
    <img :src="isFullFlag?closeFullImg:openFullImg" style="width:12px;vertical-align:middle"/>
    {
    
    {isFullFlag?'退出全屏':'全屏'}}
</span>
 
<script>
export default {
    data(){
        return{
            isFullFlag:false
        }
    }
    mounted() {
        // 监听页面全屏
        window.addEventListener("fullscreenchange", (e)=> {
          if(screenfull.isFullscreen){
            this.isFullFlag = true
          }else{
            this.isFullFlag = false
          }
        })
    },
    methods:{
        clickFun(){
            this.isFullFlag =!this.isFullFlag
            if (!screenfull.enabled) {
                this.$message({
                     message: 'Your browser does not work',
                     type: 'warning'
                })
                return false
            }
            screenfull.toggle()
        }
        
    }
}
</script>

2.全屏页面的部分内容

<template>
    <span  style="color:#918F8F" @click="clickFun">
        <img :src="isFullFlag?closeFullImg:openFullImg" style="width:12px;vertical-align:middle"/>
        {
    
    {isFullFlag?'退出全屏':'全屏'}}
    </span>
    <!--需要全屏展示的内容-->
    <div id="content"></div>
</template>
 
<script>
export default {
    data(){
        return{
            isFullFlag:false
        }
    }
    mounted() {
        // 监听页面全屏
        window.addEventListener("fullscreenchange", (e)=> {
          if(screenfull.isFullscreen){
            this.isFullFlag = true
          }else{
            this.isFullFlag = false
          }
        })
    },
    methods:{
        clickFun(){
            this.isFullFlag =!this.isFullFlag
            const element = document.getElementById('content');//指定全屏区域元素
            if(this.isFullFlag){
                // screenfull.request(element);
                element.requestFullscreen()
            }else{
                document.exitFullscreen();
            }
        }
        
    }
}
</script>

注意：一个标签页的同一个id只能全屏一次，若有多个内容都需要全屏打开，请设置不同的id