vue中实现浏览器全屏与退出全屏功能

在 <template> 标签中主要是放一个全屏与退出全屏的按钮，并绑定上点击事件 fullScreenClick 。全屏与退出全屏的按钮显示切换是通过变量 fullScreen 控制的。

在js中，设置当前全屏状态的初始值为 false 。由于全屏状态下 ，按 "Esc" 键退出全屏，浏览器监听不到 "Esc" 键的事件，所以需要通过浏览器窗口大小改变的事件去触发退出全屏事件。（如果全屏是单一页面的功能，记得在组件销毁的时候清除掉 window 中 resize 事件的绑定）。

项目中使用elementUI（v2.15.1）的Notification，改动样式后作为浮窗，发现esc按键会将Notification关闭，需要取消esc的按键监听。

查看element-ui/lib/notification.js发现组件mounted中有添加keydown事件监听

参照beforeDestroy中的解绑，在notify创建后直接取消keydown监听，之后按下esc键对应Notification不再关闭。

希望之后的版本有类似MessageBox的closeOnPressEscape配置。

1、Vue 中的按键别名：

回车 =>enter

删除 =>delete （捕获‘删除’和‘退格’键）

退出 =>esc

空格 =>space

换行 =>tab

上 =>up

下 =>down

左 =>left

右 =>right

2、Vue未提供别名的按键，可以使用按键原始的 key 值 去绑定，但是需要注意转换用短横线命名（比如：键盘上的：CAPSLOCK 。就需要转换为：caps-lock）

3、系统修饰键（用法特殊）：ctrl、alt、shift、meta（win键）

4、也可以使用 keyCode 去指定具体的按键（不推荐）

keyCode MDN

5、 Vue.config.keyCodes.自定义的键名 = 键码 也可以定制按键别名

---