vue全屏

<template>
  <div>
    <img src="../assets/fangda.png" @click="toggleFullscreen" />
  </div>
</template>

<script>
export default {
  methods: {
    toggleFullscreen() {
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else {
        document.documentElement.requestFullscreen();
      }
    }
  }
}
</script>

升级版本，对全屏进行监听，全屏按钮消失

<template>
  <div>
    <!-- <button v-if="!isFullscreen" @click="toggleFullscreen">全屏</button> -->
    <img v-if="!isFullscreen" src="../assets/fangda.png" @click="toggleFullscreen" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isFullscreen: false
    }
  },
  methods: {
    toggleFullscreen() {
      if (!this.isFullscreen) {
        // Enter fullscreen mode
        document.documentElement.requestFullscreen()
      } else {
        // Exit fullscreen mode
        document.exitFullscreen()
      }
    },
    handleFullscreenChange() {
      this.isFullscreen = !!document.fullscreenElement
    }
  },
  mounted() {
    document.addEventListener('fullscreenchange', this.handleFullscreenChange)
  },
  beforeUnmount() {
    document.removeEventListener('fullscreenchange', this.handleFullscreenChange)
  }
}
</script>