vue使用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();
},
methoeds: {
    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的图标展示了