smsb-web-develop/src/views/dashboard/v2/FullScreen.vue

<template>
  <div>
    <slot
      name="trigger"
      :is-full-screen="isFullScreen"
    >
      <div
        class=" has-active"
        @click="changeFullScreen"
      >
        {{ isFullScreen ? "退出" : "全屏" }}
      </div>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'FullScreen',
  data () {
    return {
      isFullScreen: !!this.$route.params.isFullScreen
    }
  },
  methods: {
    changeFullScreen () {
      const element = document.documentElement
      // 如果是全屏状态
      if (this.isFullScreen) {
        // 如果浏览器有这个Function
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      }
      this.isFullScreen = !this.isFullScreen
    }
  }
}
</script>
<style
  lang="
      scss"
  scoped
></style>