VUE开发--全屏插件--screenfull

官网

https://github.com/sindresorhus/screenfull.js

1、安装

npm install screenfull --save

2、引入

在你需要使用的页面引入

import screenfull from 'screenfull'

3、使用 （具体API 看官网 这儿只讲我用的）

screenfull.request(element, options?) 页面进入全屏 如果只是某一个元素进入全屏 则 screenfull.request(ele)
screenfull.isEnabled：返回一个布尔值，是否允许您进入全屏模式。如果您的网页位于内，则需要添加一个allowfullscreen属性（+webkitallowfullscreen和mozallowfullscreen）。
screenfull.isFullscreen： 返回boolean是否全屏处于活动状态。

基于vue的实例代码：可直接使用

<template>
  <div>
    <div>
      <div
        id="full"
        style="background: black; color: white"
        v-if="isFull"
        @click="fullScreen"
      >
        进入全屏
      </div>
      <div
        style="background: pink; color: white"
        v-else
        @click="exitFullScreen"
      >
        退出全屏
      </div>
    </div>
  </div>
</template>

<script>
import screenfull from "screenfull"; // 引入screenfull
export default {
  name: "",
  props: {},
  components: {},
  data() {
    return {
      isFull: true, // 判断是否全屏，默认不全屏
    };
  },
  methods: {
    // 全屏事件
    fullScreen() {
      this.isFull = false;
      if (screenfull.isEnabled) {// 返回一个布尔值，是否允许您进入全屏模式  如果你当前是非全屏 则返回true
        var full = document.getElementById("full");
        screenfull.request(full); // 如果不要full 则页面全屏
      }
    },
    // 退出全屏事件
    exitFullScreen() {
      this.isFull = true;
      screenfull.exit();  //提出全屏
    },
  },
  mounted() {
    var _this = this;   
    window.onresize = function () {
      screenfull.on("change", () => {
        if (screenfull.isFullscreen) {  // 返回boolean是否全屏处于活动状态 全屏时为true
          //表示全屏
          _this.isFull = false;
        } else {
          _this.isFull = true
        }
      });
    };
  },
  watch: {},
  computed: {},
};
</script>

<style scoped lang='scss'>
</style>

window.onresize(事件会在窗口或框架被调整大小时触发)的this是指向window的所以 这里需要保存vue的this

全屏的退出这儿有三种方式
1、 通过按钮 （点击事件退出全屏）
2、通过ESC
3、通过F11

后两种的实现必须加入mounted中的代码

按钮的进入全屏和退出全屏 最好使用原生js

//全屏
function fullScreen() {
    var element = document.documentElement;
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    }
}

//退出全屏 
function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}