Vue 中实现点击 进入F11全屏

<template>
  <div>
    <button @click="enterFullscreen">点击进入全屏</button>
  </div>
</template>
<script>
export default {
  methods: {
    enterFullscreen() {
      const isFullscreen = document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement
  
      if (!isFullscreen) {
        document.documentElement.requestFullscreen()
      } else {
        document.exitFullscreen()
      }
    },
    toggleFullscreenBtn() {
      const isFullscreen = document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement
  
      const btn = document.querySelector('button')
      if (isFullscreen) {
        btn.textContent = '退出全屏'
      } else {
        btn.textContent = '进入全屏'
      }
    }
  },
  mounted() {
    document.addEventListener('fullscreenchange', this.toggleFullscreenBtn)
    document.addEventListener('mozfullscreenchange', this.toggleFullscreenBtn)
    document.addEventListener('webkitfullscreenchange', this.toggleFullscreenBtn)
    document.addEventListener('MSFullscreenChange', this.toggleFullscreenBtn)
  },
  beforeDestroy() {
    document.removeEventListener('fullscreenchange', this.toggleFullscreenBtn)
    document.removeEventListener('mozfullscreenchange', this.toggleFullscreenBtn)
    document.removeEventListener('webkitfullscreenchange', this.toggleFullscreenBtn)
    document.removeEventListener('MSFullscreenChange', this.toggleFullscreenBtn)
  }
}
</script>
<style>
  div {
    height: 100vh;
    width: 100vw;
    /* 其他样式 */
  }
</style>