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

1.给按钮添加事件

 

2.使用document.fullscreenElement()来判断是都全屏

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

你可能感兴趣的:(vue.js,javascript,前端)