vue使用screenfull实现全屏

我正在参加「掘金·启航计划」

在项目中很多时候都会有全屏的需求

例如下图, 点击全屏按钮把整个后台全屏展示

但是产品可能会要求你不仅全屏我还要支持exc按键退出全屏, 按exc键退出的话, 可能无法监听退出全屏的状态导致退出全屏的icon图标没有切换成全屏图标, (虽然可以使用监听键盘事件onkeydown, 但是代码多少可能会显得比较臃肿)....

其实利用screenfull这个插件可以很简单实现这个功能

首先安装这个插件(可以安装5.1.0的版本)

npm install --save screenfull@5.1.0

然后在项目中导入使用

import screenFull from 'screenfull';

然后我们需要初始化注册这个事件 在created中调用初始化函数, 在data中定义要控制的变量, 我们就是根据这个字段来控制icon图标的展示状态,并且需要在组件销毁的时候注销, screenfull的change事件

data() {
  return {
    screenState: false // 屏幕的状态
  }
},
created() {    
    this.init();
},
methoed: {
  init() {    
    if (screenFull.isEnabled) { // 判断是否支持全屏        
      screenFull.on('change', this.change); // 开启监听change事件    
    }
  },
  // 更改当前屏幕的状态  
  change() {      
    this.screenState = screenFull.isFullscreen; // 更新全屏状态   
  },
},
// 最后注销监听事件
beforeDestroy() {  
  if (screenFull.isEnabled) {    
    screenFull.off('change', this.change);  
  }
}

我们只需要给 全屏icon 和 退出全屏icon 绑定点击事件并且通过 v-if / v-else 来控制展示与隐藏即可 这样icon图标就可以跟随屏幕的状态自动更换对应的图标了

<!-- 全屏 -->
<div
  v-if='screenState'
  class="iconfont icon-24gl-fullScreenEnter iconClass"   
  @click="handlerScreenFull"
/>
<!-- 退出全屏 -->
<div 
  v-else
  class="iconfont icon-24gl-fullScreenEnter iconClass"
  @click="handlerScreenFull"
/>

绑定点击icon的事件来进行触发状态的切换

handlerScreenFull() {  
  if (screenFull.isEnabled) { // 加个判断浏览器是否支持全屏    
    screenFull.toggle(); // 切换全屏状态  
  } else {
    this.$message.info('您的浏览器不支持全屏');  
  }
},

这样我们就可以完美控制, 全屏和退出全屏icon的图标展示了