vue 使用全屏插件screenfull.js的用法(解决全屏状态不能监听Esc按键)

开始使用screenfull.js

npm install --save screenfull  //下载

import screenfull from 'screenfull' //导入

先来看看如果不使用screenfull.js，要让画面全屏幕的话，程序大概会像这样子

document.fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.documentElement.webkitRequestFullScreen;

function requestFullscreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    }
}

if (document.fullscreenEnabled) {
    requestFullscreen(document.documentElement);
}

我们必须检查目前柳览器是否支持Fullscreen API，并针对不同浏览器调用不同的方法，而当载入screenfull.js，程序就简单多了：

if (screenfull.enabled) {
    screenfull.request();
}

只需要使用screenfull.enabled检查是否支持Fullscreen API，然后再使用screenfull.request()调用即可，超简单的啦！

ps：如果不能全屏，去掉if (screenfull.enabled) 这个判断。直接使用 screenfull.request();就行

对某个element使用全屏幕 如果只需要针对画面上的某个element进行全屏幕显示的话，也很简单，在screenfull.request()参数中加入要全屏幕显示的目标就可以了

if (screenfull.enabled) {
  screenfull.request(document.getElementById('image'));
}

取消全屏幕显示 基本上浏览器都支持直接按esc来取消全屏幕，如果希望在程序中取消，只要调用screenfull.exit()即可

if (screenfull.enabled) {
  screenfull.exit();
}

解决全屏状态不能监听Esc按键

screenfull.isFullscreen是可以判断是否为全屏状态的

screenFull () {
      screenfull.toggle() //切换全屏
      if (screenfull.enabled) {
        screenfull.on('change', () => {
          if(screenfull.isFullscreen){
           //全屏时，要执行的操作
          }else{
            //取消全屏时，要执行的操作
          }
         // console.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No');
        });
      }
    },

ps：如果不能执行操作，去掉if (screenfull.enabled) 这个判断。直接使用 screenfull.on;就行