点击按钮实现全屏效果

通过原生JS方式实现  存在兼容问题 谷歌浏览器适用  若想适配可以使用插件实现

//点击按钮实现全屏
const fullScreen =  () =>{

      //DOM对象的一个属性：可以用来判断当前是不是全屏模式（全屏： true  不是全屏：false）
      let full = document.fullscreenElement  

       //切换为全屏
       if(!full){
            //利用requestFullscreen方法实现全屏
            document.documentElement.requestFullscreen()

        }else{
            //退出全屏
            document.exitFullscreen()        

        }
}

通过插件实现全屏效果    screenfull

安装

npm install screenfull

页面引入使用

import screenfull from 'screenfull'

页面绑定事件 全部全屏

<el-button type="primary" @click="SetFullScreen">全屏</el-button>

//全屏取消全屏
const SetFullScreen = () => {
  console.log(screenfull.isEnabled);
    //screenfull.isEnabled  此方法返回布尔值，判断当前能不能进入全屏
    if (!screenfull.isEnabled) {
        return false
    }
    //screenfull.toggle 此方法是执行全屏化操作。如果已是全屏状态，则退出全屏
    screenfull.toggle()
}

若只想让某个元素全屏  下面方法实现

    <div class="box">
       当前时间1111111
    </div>

    <el-button type="primary" @click="SetFullScreen2">点我实现全屏展示  </el-button>

    const SetFullScreen2 = () => {
	//获取dom元素节点来实现指定元素全屏展示
    let el = document.querySelector('.box')
    //screenfull.isEnabled  此方法返回布尔值，判断当前能不能进入全屏
    if (!screenfull.isEnabled) {
        return false
    }
    //screenfull.toggle 此方法是执行全屏化操作。如果已是全屏状态，则退出全屏
    screenfull.toggle(el)
}