vue控制全屏显示

1、在需要控制全屏的界面引入

import screenfull from 'screenfull'

2、控制全屏切换按钮方法

clickFullscreen(){
    if (!screenfull.isEnabled) {//判断是否支持全屏
    this.$message({
    message: '您的浏览器暂时不支持全屏切换',
    type: 'warning'
    })
    return false
  }
    screenfull.toggle()//切换全屏
}

总结：

    首先安装 npm install screenfull --save

    在使用.vue文件中 引入 import screenfull from 'screenfull'

    在按钮方法中调用 screenfull.toggle()

    还可以检测全屏状态 screenfull.isFullscreen

    测试浏览器是否支持全screenfull screenfull.isEnabled

screenfull  里面的API：

    .request(ele) 全屏

    .exit() 退出全屏

    .toggle() 切换全屏

    .on(event, function) ： event为 ‘change’ | ‘error’ 注册事件

    .off(event, function) ： 移除前面已经注册的事件

    .element： 返回一个全屏的dom节点，如果没有就为 null

    .isFullscreen : 是否是全屏状态

    .isEnabled ： 判断是否支持全屏