vue实现浏览器全屏展示功能

编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要介绍了vue实现浏览器全屏展示功能,项目中使用的是sreenfull插件,执行命令安装,具体实现代码跟随长沙网络推广一起看看吧

1、项目中使用的是sreenfull插件,执行命令安装

npm install --save screenfull

2、安装好后,引入项目,用一个按钮进行控制即可,按钮方法如下:

toggleFullscreen() {
  if (!screenfull.enabled) {
   this.$message({
    message: 'you browser can not work',
    type: 'warning'
   })
   return false
  }
  screenfull.toggle()
}

试了一下可以全屏,我用的chrome,IE9以下不要考虑

3、第一步完成之后就是怎么监听到全屏的变化,因为如果是通过Esc键退出全屏,此时是没办法监听到的。经过一番查找,解决办法如下:

<script>
import screenfull from 'screenfull'
export default {
 data () {
   return {
    isFullscreen: false
   }
  },
 methods: {
  /**
   * 全屏事件
   */
  screenfull() {
   if (!screenfull.enabled) {
    this.$message({
     message: 'Your browser does not work',
     type: 'warning'
    })
    return false
   }
   screenfull.toggle()
   this.isFullscreen = true
  },
  /**
   * 是否全屏并按键ESC键的方法
   */
  checkFull() {
   var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
   // to fix : false || undefined == undefined
   if (isFull === undefined) {
     isFull = false
   }
   return isFull
  }
 },
 mounted() {
   window.onresize = () => {
      // 全屏下监控是否按键了ESC
      if (!this.checkFull()) {
       // 全屏下按键esc后要执行的动作
       this.isFullscreen = false
      }
     }
    }
}
</script>

总结

以上所述是长沙网络推广给大家介绍的vue实现浏览器全屏展示功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
如果你觉得本文对你有帮助,欢迎网络推广网站推广转载,烦请注明出处,谢谢!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板