浏览器全屏切换无法监控到F11键

在开发网页过程中，需要使用到全屏切换功能，然后给全屏切换按钮更换不同的图标。但是JS只能监听到F11全屏，无法监听到F11和Esc退出全屏。 解决办法有两个：1、使用插件screenfull。 2、把F11全屏的默认功能禁用，然后通过js来实现F11的全屏切换

1、使用screenfull

直接下载screenfull插件使用

import screenfull from 'screenfull' // screenfull插件
import isFullscreen from 'index.js' // 
export default {
	data () {
    		return {
        		isFullScreen: false // 判断是否全屏，全屏：true，不全屏：false
        	}
    	},
        mounted() {
                document.addEventListener('keydown', this.handleKeyDown)
                window.onresize = () => {
            	this.isFullScreen = screenfull.isFullscreen
            }
        },
        methods: {
        	handleKeyDown (e) {
            		if (e && e.keyCode === 122) {
                		e.preventDefault() // 阻止默认事件
                        	this.handleResize()
                	}
            	},
                handleResize () {
                	this.ifFullScreen = !this.ifFullScreen
                    	isFullscreen(document.querySelector('html'), this.ifFullScreen)
                }
        },
        destoryed () {
        	window.removeEventListener('keydown', this.handleKeyDown)
            window.onresize = null
        }
}

index.js

// 除IE外各浏览器全屏、退出全屏的方法
export function isFullscreen(element, state) {
	let isFullscreen = document.fullScreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false
    	if (!isFullscreen) {
        	if (element.requestFullscreen) {
            		element.requestFullscreen()
            	} else if (element.mozRequestFullScreen) {
                	element.mozRequestFullScreen()
                } esle if (element.webkitRequestFullscreen) {
                	element.webkitRequestFullscreen()
                } else if (element.msRequestFullscreen) {
                	element.msRequestFullscreen()
                }
        } else {
        	if (document.exitFullscreen) {
            		document.exitFullscreen()
            	} else if (document.mozCancelFullScreen) {
            		document.mozCancelFullScreen()
                } else if (document.webkitExitFullscreen) {
                	document.webkitExitFullscreen()
                }
        }
}

2、把F11全屏的默认功能禁用，然后通过js来实现F11的全屏切换

禁用浏览器默认F11全屏

import isFullscreen from 'index.js' // 
export default {
	data () {
    	return {
        	ifFullScreen: false
        }
    }
},
mounted() {
	window.addEventListener('keydown', this.handleKeyDown, true)
    	window.addEventListener('fullscreenchange', this.fullscreenchange) // 监听到浏览器窗口大小发生变化，调用fullscreenchange()方法
},
method: {
	fullscreenchange() { // 判断浏览器窗口是否全屏的变量
    		this.isFullScreen = !this.fullele()
    	},
    	handleKeyDown(e) {
    		if (e.keyCode === 122) {
        		e.preventDefault() // 阻止默认事件
            		e.stopPropagation() // 阻止冒泡事件
            		this.handleResize()
        	}
    	},
    	handleResize: function() {
    		this.ifFullScreen = !this.ifFullScreen
        	isFullscreen(document.querySelector('html'), this.ifFullScreen)
    	},
    	fullele() {
    		return (
        		document.fullscreenElement || document.webkitFullscreenElement ||
            		document.msFullscreenElement || document.mozFullScreenElement || null
        	)
    	},
    	destoryed() {
    		window.removeEventListener('keydown', this.handleKeyDown)
        	window.removedEventListener('fullscreenchange', this.fullscreenchange)
    	}
}