FullScreenBtn.vue 1.83 KB
Newer Older
wangdanlei's avatar
wangdanlei committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
<template>
  <!--  <img-->
  <!--    v-if="!isFullScreen"-->
  <!--    alt=""-->
  <!--    src="../icons/components/sidebar/quanping.png"-->
  <!--    class="right-menu-item right-menu-item-fullscreen"-->
  <!--    @click="fullClick"-->
  <!--  >-->
  <!--  <img-->
  <!--    v-else-->
  <!--    alt=""-->
  <!--    src="../icons/components/sidebar/cancel-full-screen.png"-->
  <!--    class="right-menu-item right-menu-item-fullscreen"-->
  <!--    @click="fullClick"-->
  <!--  >-->
  <svg-icon
    v-if="!isFullScreen"
    class-name="right-menu-item right-menu-item-fullscreen"
    icon-class="full"
    @click="fullClick"
  />
  <svg-icon v-else class-name="right-menu-item right-menu-item-fullscreen" icon-class="unfull" @click="fullClick" />
</template>

<script>
export default {
  data() {
    return {
      isFullScreen: false
    }
  },
  methods: {
    fullClick() {
      // 此处可根据获取节点进行区域全屏事件
      const element = document.documentElement
      if (this.isFullScreen) {
        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">

</style>