Vue设置屏幕全屏

<template>
  <div>
    <button @click="changeFull">切换全屏</button>
  </div>
</template>

<script>
export default {
  name: 'fullScrenn',
  data() {
    return {
      isFull: true
    }
  },
  methods: {
    changeFull() {
      var docElm = document.documentElement

      if (this.isFull) {
        //W3C
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen()
        }

        //FireFox
        else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen()
        }

        //Chrome等
        else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen()
        }
      } else {
        //W3C
        if (document.exitFullscreen) {
          document.exitFullscreen()
        }
        //FireFox
        else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        }
        //Chrome等
        else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        }
        //IE11
        else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      }
      this.isFull = !this.isFull
    }
  }
}
</script>

<style lang="scss" scoped></style>