大家好，欢迎来到IT知识分享网。
项目开发过程中，优化项目时考虑加入全屏功能。具体实践步骤如下：
一、安装依赖
项目中使用的是sreenfull插件，执行命令安装
npm install --save screenfull二、应用
组件安装好后，引入项目，用一个按钮进行控制即可，通过Esc键退出全屏按钮方法如下：
<script> 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 } } } } </script>免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/50773.html
