screenfull实现页面窗口全屏显示

1、简介

screenfull 组件，一个实现窗口全屏组件。就是把自己需要的窗口在显示器上最大化显示，跟我们在浏览器中按下键盘上的“F11”按键效果一样。在前端项目开发中通常就会有全屏功能的需求，在Vue中实现窗口全屏显示。

2、安装

安装

//npm安装
npm install screenfull --save

在node_modules中可以看到screenfull文件夹，screenfull.js在screenfull对象中定义了request、exit、toggle、onchange、onerror、on、off等相应的方法。

核心源码：

 var screenfull = {
  request: function (element, options) {
   return new Promise(function (resolve, reject) {
    var onFullScreenEntered = function () {
     this.off('change', onFullScreenEntered);
     resolve();
    }.bind(this);

    this.on('change', onFullScreenEntered);

    element = element || document.documentElement;

    var returnPromise = element[fn.requestFullscreen](options);

    if (returnPromise instanceof Promise) {
     returnPromise.then(onFullScreenEntered).catch(reject);
    }
   }.bind(this));
  },
  exit: function () {
   return new Promise(function (resolve, reject) {
    if (!this.isFullscreen) {
     resolve();
     return;
    }

    var onFullScreenExit = function () {
     this.off('change', onFullScreenExit);
     resolve();
    }.bind(this);

    this.on('change', onFullScreenExit);

    var returnPromise = document[fn.exitFullscreen]();

    if (returnPromise instanceof Promise) {
     returnPromise.then(onFullScreenExit).catch(reject);
    }
   }.bind(this));
  },
  toggle: function (element, options) {
   return this.isFullscreen ? this.exit() : this.request(element, options);
  },
  onchange: function (callback) {
   this.on('change', callback);
  },
  onerror: function (callback) {
   this.on('error', callback);
  },
  on: function (event, callback) {
   var eventName = eventNameMap[event];
   if (eventName) {
    document.addEventListener(eventName, callback, false);
   }
  },
  off: function (event, callback) {
   var eventName = eventNameMap[event];
   if (eventName) {
    document.removeEventListener(eventName, callback, false);
   }
  },
  raw: fn
 };

3、使用

要实现全屏功能我们只要调用screenfull中的toggle法，该方法通过判断isFullscreen属性来决定调用exit方法还是request方法。因此我们只要在使用的页面引用screenfull，然后通过click方法调用toggle方法就可以实现全屏功能了。

3.2 创建图标

该功能一般放在页头菜单中，我们先创建一个图标样式

<!-- 全屏图标-->
<i @click="click" style=" float: right;font-size: 28px;color: white;padding-top: 15px;padding-right: 8px;" class="el-icon-rank"></i>

3.3 引入及操作

<script>
import screenfull from 'screenfull'
export default {
  methods: {
    click () {
      screenfull.toggle()
    },
  },
}

这样就能达到效果了.

3.4 检测是否支持全屏

screenfull只定义了5中常用的浏览器类型，所以screenfull并不是支持所有的浏览器全屏显示的，因此我们在切换前先检测下浏览器是否支持全屏显示功能，这里我们可以调用screenfull中的isEnabled属性。

  methods: {
    click () {
      //判断是否支持
      console.log(screenfull.isEnabled)
      if (!screenfull.isEnabled) {
        this.$message({
          message: "不支持全屏",
          type: "warning"
        });
        return false;
      }
      screenfull.toggle()
    },
  },

END

免费技术支持微信：15712862196

咨询QQ：2657535456

咨询微信号：huice666