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,
};
|
