前端全屏功能和vue的渲染函数

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/longlc123/article/details/82968035

<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文档'),
          '快速查看'
        ])
      }