Vue实现点击按钮全屏

记录本次修复项目中点击按钮全屏功能，F11全屏后点击按钮退出全屏失效的问题。
templete 代码

<template>
  <div>
    <i class="icon-fullscreen" @click="toggleFullscreen"></i>
  </div>
</template>

js 代码

methods: {
	toggleFullscreen() {
		let _this = this;
		let el = document.documentElement;
		if (document.fullscreenElement === null) {
			_this.openFullscreen(el);
		} else {
			_this.quitFullscreen();
		}
	},
	openFullscreen(element) {
		if (element.requestFullscreen) {
			element.requestFullscreen();
		} else if (element.webkitRequestFullScreen) {
			element.webkitRequestFullScreen();
		} else if (element.mozRequestFullScreen) {
			element.mozRequestFullScreen();
		} else if (element.msRequestFullscreen) {
			// IE11
			element.msRequestFullscreen();
		}
	},
	quitFullscreen() {
		if (document.exitFullscreen) {
			document.exitFullscreen();
		} else if (document.webkitCancelFullScreen) {
			document.webkitCancelFullScreen();
		} else if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
		} else if (document.msExitFullscreen) {
			document.msExitFullscreen();
		}
	},
	getKeyDown(e) {
		let _this = this;
		if (event.keyCode === 122) {
			event.preventDefault() || (event.returnValue = false);
			_this.toggleFullscreen(); // 触发全屏的按钮
		} else if (event.keyCode === 27) {
			if (document.fullscreenElement !== null) {
				_this.quitFullScreen();
			}
		}
	}
},
mounted() {
	window.addEventListener("keydown", this.getKeyDown);
}

document.fullscreenElement 返回当前以全屏模式显示的元素。
如果没有使用全屏模式显示的元素，此属性返回 null 。

期间也有尝试过监听 keyup 事件，但是依然不好使，不知道是什么原因。