vue 利用 screenfull 实现全屏

利用 screenfull 实现全屏

有时候我们实现的全屏点击的时候icon图标可以正常切换, 但是如果按 esc 键退出的话就不能监听到退出全屏导致icon展示不正确
其实我们可以利用 screenFull 的监听事件, 来实现屏幕的全屏和退出全屏的监听,当然使用原生的api也是可以实现的, 不过代码会显得有点臃肿
活不多说开整

1. 第一步先安装插件
   可以安装5.1的版本

npm install --save screenfull@5.1.0

2. 然后再项目中导入使用

import screenFull from 'screenfull';

3. 然后我们需要在created 中初始化注册这个事件

data() {
  return {
    screenState: false // 屏幕的状态
  }
},
created() {    
  this.init(); // 初始化注册screenFull的change事件
},
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);  
  }
}

4. 我们只需要给按钮绑定事件即可, 通过 v-if 控制不同按钮的展示状态

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

5. 然后绑定点击icon的事件来进行状态的切换

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

6. 大功告成!!!