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

开始使用screenfull.js

scss 复制代码
npm install --save screenfull  //下载
javascript 复制代码
import screenfull from 'screenfull' //导入

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

scss 复制代码
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,程序就简单多了:

scss 复制代码
if (screenfull.enabled) {
    screenfull.request();
}

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

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

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

javascript 复制代码
if (screenfull.enabled) {
  screenfull.request(document.getElementById('image'));
}

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

scss 复制代码
if (screenfull.enabled) {
  screenfull.exit();
}

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

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

scss 复制代码
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;就行

相关推荐
华仔啊1 小时前
前端必看!12个JS神级简写技巧,代码效率直接飙升80%,告别加班!
前端·javascript
excel1 小时前
dep.ts 逐行解读
前端·javascript·vue.js
爱上妖精的尾巴1 小时前
5-20 WPS JS宏 every与some数组的[与或]迭代(数组的逻辑判断)
开发语言·前端·javascript·wps·js宏·jsa
excel1 小时前
Vue3 响应式核心源码全解析:Dep、Link 与 track/trigger 完整执行机制详解
前端
前端大卫1 小时前
一个关于时区的线上问题
前端·javascript·vue.js
whltaoin2 小时前
中秋赏月互动页面:用前端技术演绎传统节日之美
前端·javascript·html·css3·中秋主题前端
IT派同学2 小时前
TableWiz诞生记:一个被表格合并逼疯的程序员如何自救
前端·vue.js
西洼工作室4 小时前
CSS高效开发三大方向
前端·css
昔人'4 小时前
css`font-variant-numeric: tabular-nums` 用来控制数字的样式。
前端·css
铅笔侠_小龙虾5 小时前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js