欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-14 10:47:39
1、项目中使用的是sreenfull插件,执行命令安装 npm install --save screenfull 2、安装好后,引入项目,用一个按钮进行控制即可,按钮方法如下...

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实现浏览器全屏展示功能,希望对大家有所帮助