前端全屏功能和vue的渲染函式
阿新 • • 發佈:2018-12-26
<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文件'), '快速檢視' ]) }