vue实现进入全屏和退出全屏的示例代码
更新时间：2023年12月13日 14:55:20 作者：Zwq8023520
最近一个项目需要进行大屏展示,所以登录完就要处于一个全屏的状态,本文主要介绍了vue实现进入全屏和退出全屏的示例代码,具有一定的参考价值,感兴趣的可以了解一下
最近一个项目需要进行大屏展示，所以登录完就要处于一个全屏的状态，当切换到控制台之后就可以退出全屏。在登录之后调用enterFullscreen方法，就可以进入全屏。在点击切换到控制台时，可以调用exitFullscreen方法。
enterFullscreen() {
const element = document.documentElement
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen()
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen()
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen()
}
},exitFullscreen() {
if (
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
) {
if (document.exitFullscreen) {
document.exitFullscreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
}
},到此这篇关于vue实现进入全屏和退出全屏的示例代码的文章就介绍到这了,更多相关vue 进入全屏和退出全屏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了vue实现自定义全局右键菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
ant design vue嵌套表格及表格内部编辑的用法说明
这篇文章主要介绍了ant design vue嵌套表格及表格内部编辑的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
Vue.js使用axios动态获取response里的data数据操作
这篇文章主要介绍了Vue.js使用axios动态获取response里的data数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
VUE安装依赖时报错:npm ERR! code ERESOLVE的解决
在使用npm安装项目依赖时,有时会遇到错误信息 “npm ERR! code ERESOLVE”,本文就来介绍一下VUE安装依赖时报错的解决,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
这篇文章主要介绍了vue-cli 目录结构详细讲解总结，详细的介绍了整个项目的目录以及目录文件的用法，非常具有实用价值，需要的朋友可以参考下2019-01-01
下面小编就为大家分享一篇vue2.0模拟锚点的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Vue Element前端应用开发之常规Element界面组件
在我们开发BS页面的时候，往往需要了解常规界面组件的使用，小到最普通的单文本输入框、多文本框、下拉列表，以及按钮、图片展示、弹出对话框、表单处理、条码二维码等等，本篇随笔基于普通表格业务的展示录入的场景介绍这些常规Element组件的使用2021-05-05
这篇文章主要为大家介绍了前端vue架构插槽slot使用教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-02-02
vue-resource post数据时碰到Django csrf问题的解决
这篇文章主要介绍了vue-resource post数据时碰到Django csrf问题的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-03-03
<Transition> 是一个内置组件,这意味着它在任意别的组件中都可以被使用,无需注册,它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上,本文介绍了Vue3使用transition实现组件切换的过渡效果,需要的朋友可以参考下2024-09-09
最新评论