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

最新推荐文章于 2024-05-30 19:11:38 发布

Mr.Meng_95

最新推荐文章于 2024-05-30 19:11:38 发布

阅读量516

点赞数 1

分类专栏：项目文章标签： vue.js javascript 前端

原文链接：https://blog.csdn.net/weixin_50999303/article/details/134806926

版权

项目专栏收录该内容

179 篇文章 10 订阅

订阅专栏

本文介绍了如何在Vue项目中通过点击按钮控制浏览器页面的全屏状态，利用`document.fullscreenElement`属性判断是否全屏，并使用`requestFullscreen`和`exitFullscreen`方法进行切换。

摘要由CSDN通过智能技术生成

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()
  }
}