vue项目实现页面全屏的效果

1.给按钮添加事件

 <el-button icon="FullScreen" size="small" circle @click="fullScreen"/>

2.使用document.fullscreenElement（）来判断是都全屏

// 全屏按钮点击
const fullScreen= ()=>{
  // DOM对象的一个属性，可以用来判断当前是不是全屏模式【全屏:true,不是全屏：false】
  let full  = document.fullscreenElement;
  if(!full){
    // 文档根节点的方法requestFullscreen（）实现全屏模式
    document.documentElement.requestFullscreen();
  }else{
    // 文档根节点的方法exitFullscreen（）退出全屏
    document.exitFullscreen()
  }
}