vue全屏插件screenfull的使用

Posted 2023-03-21

参考技术A 最近在做vue大屏项目，大屏全屏按钮可使用vue插件screenfull实现。

1、项目目录下安装screenfull

npm install screenfull --save-dev

2、项目组件中引入

import screenfull from 'screenfull'

3、使用screenfull 组件

1）div中绑定点击事件

<div class="title_left2">

      <span @click="clickFullscreen"></span>      

    </div>

2）实现事件方法

methods: 

    clickFullscreen()

      if (!screenfull.isEnabled) 

          this.$message(

            message: '浏览器不支持',

            type: 'warning'

          )

          return false

        

        screenfull.toggle();

        this.isFullscreen=true

      ,

      checkFull() 

      var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;

      // to fix : false || undefined == undefined

      if (isFull === undefined) 

          isFull = false;

      

      return isFull;

    

3）监听当前是否全屏，实现屏幕自适应

mounted() 

      window.onresize = () => 

        // 全屏下监控是否按键了ESC

        if (!this.checkFull()) 

          // 全屏下按键esc后要执行的动作

          this.isFullscreen = false;

        

      

     

Vue3如何实现全屏模式

screenfull

首先安装screenfull插件

pnpm install --save screenfull

使用

然后引入

import screenfull from "screenfull";

然后就可以通过screenfull.toggle()来切换全屏模式了。

注意这个toggle操作必须由用户触发，否则不会生效，所以必须有一个按钮让用户来交互。

一般在使用screenfull.toggle()可以通过screenfull.isEnabled来判断当前浏览器是否支持全屏。

全屏状态

如果我们需要知道全屏的状态来改变一些组件，比如全屏按钮状态的切换。这时候可以用screenfull.isFullscreen来判断当前是否是全屏状态。

另外可以通过screenfull.onchange(callback)来注册一个监听，当切换全屏或退出全屏的时候就会触发。

onchange(callback)实际上是on('change', callback)的别名，所以直接用on('change', callback)也可以注册状态监听。

用off('change', callback)来注销监听。

Api

最后来看看screenfull的Api：

• toggle：切换全屏模式，如果全屏则退出
• isEnabled：判断浏览器是否支持全屏
• isFullscreen：判断是否处于全屏状态；
• exit：退出全屏；
• on：注册监听，有两种监听"change"和"error"，change可以监听全屏切换；
• off：注销监听；
• onchange：相当于on('change', callback)；
• onerror：相当于on('error', callback)；

关注公众号：BennuCTech，获取更多干货！