Vue F11监听切大屏

用Datav插件做大屏可视化时，有一个全屏需求，我的想法是监听F11键，然后触发浏览器的大屏功能API。百度一下，竟有插件，大喜。插件的好处大家都知道，时间熬出来的，并且BUG极少，代码精简，做了全浏览器兼容。

Rec 0001

步骤

1.插件

npm install --save screenfull

2.引入(可全局，也可需要的文件中引入)

import screenfull from 'screenfull'

3.datav的全屏(这个全屏是做了页面级的全屏处理，如不是单页布局不结合这个用会有问题)

4.html的放大按钮

5.全屏插件结合datav的全屏js代码

 data() {
    return {
      show_big: false,
      fullscreen:false

    }
  },
  computed: {
  },
  watch: {
    fullscreen(newvalue, oldvalue) {
      if (newvalue != oldvalue) {
        // 进行退出全屏的后的事件
        console.log('退出全屏')
      }
    }
  },
  mounted() {
    const that = this
    window.addEventListener('keydown', this.KeyDown, true)
    window.onresize = () => {
      // 调用判断全屏的方法，用来监听
      that.checkFull()
    }
  },
  created() {
  },
  beforeDestroy() {
  },
  methods: {

    KeyDown(event) {
      if (event.keyCode === 122) {
        event.returnValue = false
        this.clickFullscreen() // 触发全屏的按钮
      }
    },

    clickFullscreen() {
      screenfull.toggle()	// 全屏状态切换
      this.fullscreen = !this.fullscreen
      this.show_big = !this.show_big
    },
    checkFull() {
      const fullscreen = window.fullScreen || document.webkitIsFullScreen
      this.fullscreen = fullscreen
      return fullscreen
    }
  }

大功就告成了

================================如果遇到问题==========================

vue screenfull全屏插件 安装之后 npm run serve报错
 Module parse failed: Unexpected token (55:42) You may need a

解决办法，用低版本插件，执行如下

npm install --save-dev screenfull@5.1.0

想看我的全部代码，贴上