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('MSFullscreenE