vue点击实现大屏

点击按钮实现全屏

以下是全部代码

<template>
  <div id="app">
    <div class="but" @click="changeScreen">{{title}}</div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      fullscreen: false,
      title: '点我大屏'
    }
  },
  mounted () {
  // 窗口变化触发事件
    window.onresize = () => {
      return (() => {
        let element = document.documentElement
        if (this.fullscreen) {
          if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen()
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen()
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen()
          } else if (document.exitFullscreen) {
            document.exitFullscreen()
          }
        } else {
          if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen()
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen()
          } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen()
          } else if (element.requestFullscreen) {
            element.requestFullscreen()
          } 
        }
        // 判断展示文字
        this.fullscreen = !this.fullscreen
        if (this.fullscreen) {
          this.title = '取消大屏'
        } else {
          this.title = '点我大屏'
        }
      })()
    }
  },
  methods: {
  // 点击文字事件
    changeScreen () {
      let element = document.documentElement
      if (this.fullscreen) {
        if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        } else if (document.exitFullscreen) {
          document.exitFullscreen()
        }
      } else {
        if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen()
        } else if (element.requestFullscreen) {
          element.requestFullscreen()
        } 
      }
    },
  }
}
</script>

这里有一个遗留问题，当全屏状态时无法拿到键盘的keyCode值，全屏状态下点击F12，页面的文字不会变化，请各位大佬指点。