vue全屏显示，esc退出

项目中有要实现全屏的需求，而且全屏和非全屏的状态有差异。

1、项目中使用的是sreenfull插件，执行命令安装

npm install --save screenfull
2、安装好后，引入项目，用一个按钮进行控制即可，按钮方法如下：

toggleFullscreen() {
if (!screenfull.enabled) {
this.$message({
message: ‘you browser can not work’,
type: ‘warning’
})
return false
}
screenfull.toggle()
}
试了一下可以全屏，我用的chrome，IE9以下不要考虑

3、第一步完成之后就是怎么监听到全屏的变化，因为如果是通过Esc键退出全屏，此时是没办法监听到的。经过一番查找，解决办法如下：

import screenfull from ‘screenfull’
export default {
data () {
return {
isFullscreen: false
}
}，
methods: {
/**
* 全屏事件
/
screenfull() {
if (!screenfull.enabled) {
this.$message({
message: ‘Your browser does not work’,
type: ‘warning’
})
return false
}
screenfull.toggle()
this.isFullscreen = true
},
/*
* 是否全屏并按键ESC键的方法
*/
checkFull() {
var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
// to fix : false || undefined == undefined
if (isFull === undefined) {
isFull = false
}
return isFull
}
},
mounted() {
window.onresize = () => {
// 全屏下监控是否按键了ESC
if (!this.checkFull()) {
// 全屏下按键esc后要执行的动作
this.isFullscreen = false
}
}
}
}