methods: {

    // 全屏 点击按钮
        allping(){
        this.status = true;
        this.enterFullscreen();
        },
       // 缩小 点击按钮
       narrow(){
       this.status = false;
       this.exitFullscreen();
      },

// 进入全屏方法
enterFullscreen() {
var docElm = document.documentElement;
//W3C
if(docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if(docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if(docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if(docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
},
// 退出全屏方法
exitFullscreen() {
//W3C
if (document.exitFullscreen) {
document.exitFullscreen();
}
//FireFox
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
//Chrome等
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
//IE11
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
},
// 判断当前页面是否全屏
getFullScreenStatus() {
this.status = !!(
document.fullscreen ||
document.mozFullScreen ||
document.webkitIsFullScreen ||
document.webkitFullScreen ||
document.msFullScreen
);
},
},

mounted() {
// 监听浏览器全屏事件
let that = this;
document.addEventListener("fullscreenchange", function() {
that.getFullScreenStatus();
});


document.addEventListener("mozfullscreenchange", function() {
that.getFullScreenStatus();
});


document.addEventListener("webkitfullscreenchange", function() {
that.getFullScreenStatus();
});


document.addEventListener("msfullscreenchange", function() {
that.getFullScreenStatus();
});


},

 

最新文章

  1. PowerDesigner中Table视图怎样同时显示Code和Name
  2. html css 网络 页面布局 颜色 参考 拾取器网址
  3. 多层嵌套对象无法使用gson反序列化的问题The JsonDeserializer com.google.gson.DefaultTypeAdapters$CollectionTypeAdapter@3bf13cde failed to de
  4. Red Gate Software 软件推荐
  5. 顶 兼容各种浏览器js折叠菜单
  6. 【Android学习】调用系统短信、电话
  7. 【剑指offer】数字在排序数组中出现的次数
  8. iOS LaunchScreen设置启动图片,启动页停留时间
  9. Session or Cookie?是否有必要使用Tomcat等一下Web集装箱Session
  10. POI颜色设置
  11. Android探究之Gson@SerializedName
  12. 如何用anysend发wirshark的报文
  13. javascript中数组的常用算法深入分析
  14. 《动物世界》的剪刀石头布 HDU --- 6418
  15. JS-Promise笔记
  16. 【Weex学习】环境搭建
  17. 08python之列表的常用方法
  18. JavaScript常用工具方法封装
  19. Python 爬虫 (五)
  20. C中的volatile关键字

热门文章

  1. .NET 6 基于IDistributedCache实现Redis与MemoryCache的缓存帮助类
  2. Win10系统安装U盘,安装纯净版Win10的通用教程
  3. Law of Iterated Expectations & Covariance
  4. Java学习笔记:2022年1月7日
  5. ABC193F Engines
  6. 微机原理与系统设计笔记2 | 8086CPU结构与功能
  7. Vue3的script setup语法糖这么好用的吗????
  8. ionic+vue+capacitor系列笔记--03项目使用Native插件
  9. Ubuntu 22.04 GCC Arm 12.2.rel1编译 DAPLink
  10. 云服务器安装Mysql之后,设置可以进行远程连接,Duplicaticate wntry '%-root' for key 'PRIMARY