Vue项目中点击按钮实现全屏模式

使用原生js实现全屏

screen() {
  let element = document.documentElement;
  if (this.fullscreen) {
    if (document.exitFullscreen) {
    document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
    }
  } else {
    if (element.requestFullscreen) {
    element.requestFullscreen();
    } else if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
    // IE11
    element.msRequestFullscreen();
    }
  }
  this.fullscreen = !this.fullscreen;
  },

原生js实现起来比较复杂，考虑到各种浏览器的兼容性问题

还有另外一种较为方便的方法

npm i --save screenfull

在vue项目中引入插件

import screenfull from "screenfull"

screen() {

  // 如果不允许进入全屏，发出不允许提示

  if (!screenfull.enabled) {

    this.$message("您的浏览器不能全屏");

    return false;

  }

  screenfull.toggle();

  },