zhangqi
/
yos_web


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
							<template>
  <div style="height: 35px" ref="fullScreen">
    <img style="width: 16px; height: 16px;line-height:16px;vertical-align: middle" @click="enterFullscreen" src="@/assets/icons/fullScroll.svg" title="全屏" v-if="isFull">
    <img style="width: 16px; height: 16px;line-height:16px;vertical-align: middle" @click="backFullscreen" src="@/assets/icons/fullBack.svg" title="退出全屏" v-else>
  </div>
</template>

<script>
export default {
  name: "fullScreen",
  props:["domId",'scrollHeight'],
  data(){
    return {
      isFull:true,
      scrollSave:''
    }
  },
  methods:{
    /*全屏*/
    enterFullscreen(){
      this.scrollSave = this.scrollHeight
      /* 获取(<html>)元素以全屏显示页面 */
      const full = document.getElementById(this.domId)
      if (full.RequestFullScreen) {
        full.RequestFullScreen()
        //兼容Firefox
      } else if (full.mozRequestFullScreen) {
        full.mozRequestFullScreen()
        //兼容Chrome, Safari and Opera等
      } else if (full.webkitRequestFullScreen) {
        full.webkitRequestFullScreen()
        //兼容IE/Edge
      } else if (full.msRequestFullscreen) {
        full.msRequestFullscreen()
      }
    },
    /*全屏还原*/
    backFullscreen(){
      /*this.onBack = false
      this.height = 'calc(100vh - 350px)'*/
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    },
    handleFullscreenChange () {
      if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
        // 全屏模式激活
        console.log('全屏')
        this.isFull = false
        this.$emit('onFull')
      } else {
        // 全屏模式退出
        this.isFull = true
        console.log('全屏模式已退出',this.scrollSave);
        this.$emit('backFull',this.scrollSave)
        this.scrollSave = ''
      }
    }
  },
  mounted() {
    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
    document.addEventListener('mozfullscreenchange', this.handleFullscreenChange);
    document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
    document.addEventListener('MSFullscreenChange',this.handleFullscreenChange)
  }
}
</script>

<style scoped>

</style>