vue 自定义全屏组件

1. FullScreen.vue

<template>
	<span class="full_screen" @click="toggleFullScreen"></span>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex'
export default {
	name: 'FullScreen',
	data(){
		return {

		}
	},
	computed: {
		...mapState('fullScreen', {
			fullScreen: state => state.fullScreen,
		}),
	},
	created(){
	},
	mounted(){
		
		window.addEventListener('keydown', this.myKeyEvent)
    
    if(document.exitFullscreen) {
      document.addEventListener('fullscreenchange', this.changeFullscreenVar)
    } else if(document.mozCancelFullScreen) {
      document.addEventListener('mozfullscreenchange', this.changeFullscreenVar)
    } else if(document.msExitFullscreen) {
			document.addEventListener('MSFullscreenChange', this.changeFullscreenVar)
			document.addEventListener('MSFullscreenError', function(){
				console.log("浏览器不支持");
			});
    } else if(document.webkitCancelFullScreen) {
      document.addEventListener('webkitfullscreenchange', this.changeFullscreenVar)
    }
	},
	methods: {
		...mapActions('fullScreen', ['handleFullScreen']),
		...mapMutations('fullScreen', ['changeFullscreenVar']),
		myKeyEvent(ev) {
			let e = ev || window.event;
			console.log('keydown', e.keyCode);
      let key = e.keyCode
      if (key === 122) {
        console.log('F11', e)
				// 阻止默认的键盘事件
				if(e.preventDefault){
            e.preventDefault();
        }else if(e.stopPropagation){
            e.stopPropagation();
        }else{
            e.returnValue = false;
        }  
				this.handleFullScreen()
				// e.returnValue = false
				// return false;
      }
    },
		toggleFullScreen() {
			console.log(1);
			this.handleFullScreen()
		},
	},
  beforeDestroy() {
    window.removeEventListener('keydown', this.myKeyEvent)
    if(document.exitFullscreen) {
      document.removeEventListener('fullscreenchange', this.changeFullscreenVar)
    } else if(document.mozCancelFullScreen) {
      document.removeEventListener('mozfullscreenchange', this.changeFullscreenVar)
    } else if(document.msExitFullscreen) {
      document.removeEventListener('MSFullscreenChange', this.changeFullscreenVar)
    } else if(document.webkitCancelFullScreen) {
      document.removeEventListener('webkitfullscreenchange', this.changeFullscreenVar)
    }
  }
}
</script>

<style scoped>
.full_screen {
	display: inline-block;
	font-size: 24Px;
	width: 30Px;
	height: 30Px;
	color: #e4f6ff;
	margin-left: 40Px;
	background: url("~@/assets/header-full-screen.png") no-repeat;
}
</style>

2. fullScreen.module.js

const state = {
	fullScreen: false,
	element: document.documentElement
};

const mutations = {
	// 改变全屏状态变量
	changeFullscreenVar(state) {
		state.fullScreen = !state.fullScreen
	},
	// 进入全屏
	lanchFullscreen(state) {
		var element = state.element
		if(element.requestFullscreen) {
			element.requestFullscreen()
			return true
		} else if(element.mozRequestFullScreen) {
			element.mozRequestFullScreen()
			return true
		} else if(element.msRequestFullscreen) {
			element.msRequestFullscreen()
			return true
		} else if(element.webkitRequestFullscreen) {
			element.webkitRequestFullScreen()
			return true
		}
	},
	// 退出全屏
	exitFullscreen(state) {
		if(document.exitFullscreen) {
			document.exitFullscreen()
			return true
		} else if(document.mozCancelFullScreen) {
			document.mozCancelFullScreen()
			return true
		} else if(document.msExitFullscreen) {
			document.msExitFullscreen()
			return true
		} else if(document.webkitCancelFullScreen) {
			document.webkitCancelFullScreen()
			return true
		}
	},
	
};

const actions = {
	// 暴露给外界的处理方法，调用这个方法，自行判断是要全屏还是退出全屏
	handleFullScreen({ commit }) {
		// debugger;
		// 注意：要在用户授权全屏后才能获取全屏的元素，否则 fullscreenEle为null
		var fullscreenEle = fullscreenEle = document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || document.webkitFullscreenElement;
		console.log(fullscreenEle, '全屏元素...')
		if(fullscreenEle) {
			console.log('exit..')
			commit('exitFullscreen')
			// commit('changeFullscreenVar')
		} else {
			console.log('lanch..')
			commit('lanchFullscreen')
			// commit('changeFullscreenVar')
		}
	}
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
};