<template>
  <div v-if="showFullScreenBtn" class="full-screen-btn-con">
    <Tooltip :content="value ? '退出全屏' : '全屏'" placement="bottom">
      <Icon @click.native="handleChange" :type="value ? 'md-contract' : 'md-expand'" :size="23"></Icon>
    </Tooltip>
  </div>
</template>

<script>
export default {
  name: 'Fullscreen',
  computed: {
    showFullScreenBtn () {
      return window.navigator.userAgent.indexOf('MSIE') < 0
    }
  },
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleFullscreen () {
      let main = document.body
      if (this.value) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        if (main.requestFullscreen) {
          main.requestFullscreen()
        } else if (main.mozRequestFullScreen) {
          main.mozRequestFullScreen()
        } else if (main.webkitRequestFullScreen) {
          main.webkitRequestFullScreen()
        } else if (main.msRequestFullscreen) {
          main.msRequestFullscreen()
        }
      }
    },
    handleChange () {
      this.handleFullscreen()
    }
  },
  mounted () {
    let isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
    isFullscreen = !!isFullscreen
    document.addEventListener('fullscreenchange', () => {
      this.$emit('input', !this.value)
      this.$emit('on-change', !this.value)
    })
    document.addEventListener('mozfullscreenchange', () => {
      this.$emit('input', !this.value)
      this.$emit('on-change', !this.value)
    })
    document.addEventListener('webkitfullscreenchange', () => {
      this.$emit('input', !this.value)
      this.$emit('on-change', !this.value)
    })
    document.addEventListener('msfullscreenchange', () => {
      this.$emit('input', !this.value)
      this.$emit('on-change', !this.value)
    })
    this.$emit('input', isFullscreen)
  }
}
</script>

<style lang="less">
.full-screen-btn-con .ivu-tooltip-rel{
  height: 64px;
  line-height: 56px;
  i{
    cursor: pointer;
  }
}
</style>

 

// 整個頁面 
onclick=   launchFullScreen(document.documentElement); 
// 某個元素 
launchFullScreen(document.getElementById("videoElement"));

// 找到支援的方法, 使用需要全屏的 element 呼叫 
function launchFullScreen(element) { 
if(element.requestFullscreen) { 
element.requestFullscreen(); 
} else if(element.mozRequestFullScreen) { 
element.mozRequestFullScreen(); 
} else if(element.webkitRequestFullscreen) { 
element.webkitRequestFullscreen(); 
} else if(element.msRequestFullscreen) { 
element.msRequestFullscreen(); 
} 
}

// 退出 fullscreen 
function exitFullscreen() { 
if(document.exitFullscreen) { 
document.exitFullscreen(); 
} else if(document.mozExitFullScreen) { 
document.mozExitFullScreen(); 
} else if(document.webkitExitFullscreen) { 
document.webkitExitFullscreen(); 
} 
} 


// 呼叫退出全屏方法! 
exitFullscreen();

Fullscreen 屬性與事件

一個壞訊息,到目前為止,全屏事件和方法依然是帶字首的,好訊息就是很快主流瀏覽器就會都支援。

1.document.fullscreenElement:  當前處於全屏狀態的元素 element.
2.document.fullscreenEnabled:  標記 fullscreen 當前是否可用.

當進入/退出 全屏模式時,會觸發 fullscreenchange 事件:

var fullscreenElement = 
document.fullscreenEnabled 
|| document.mozFullscreenElement 
|| document.webkitFullscreenElement; 
var fullscreenEnabled = 
document.fullscreenEnabled 
|| document.mozFullscreenEnabled 
|| document.webkitFullscreenEnabled;

Fullscreen CSS
瀏覽器提供了一些有用的 fullscreen CSS 控制規則:

/* html */ 
:-webkit-full-screen { 
/* properties */ 
} 
:-moz-fullscreen { 
/* properties */ 
} 

:fullscreen { 
/* properties */ 
} 

/* deeper elements */ 
:-webkit-full-screen video { 
width: 100%; 
height: 100%; 
} 


/* styling the backdrop */ 
::backdrop { 
/* properties */ 
}
 

vue 渲染函式

vue 渲染函式
      render: (h) => {
        return h('p', {
          style: {
            fontSize: '13px'
          }
        }, [
          '點選',
          h('a', {
            attrs: {
              href: 'https://lison16.github.io/iview-admin-doc/#/',
              target: '_blank'
            }
          }, 'iview-admin2.0文件'),
          '快速檢視'
        ])
      }