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

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