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>
|