js实现全屏效果/某个div全屏

<template>
  <div>
    <button @click="fullScreen">全屏</button>
  </div>
</template>

<script>
export default {
  methods: {
    fullScreen() {
      //若要全屏页面中某个div，var element= document.getElementById("divID");
      var element = document.documentElement;
      //IE 10及以下ActiveXObject
      if (window.ActiveXObject) {
        var WsShell = new ActiveXObject("WScript.Shell");
        WsShell.SendKeys("{F11}");
      }
      //HTML W3C 提议
      else if (element.requestFullScreen) {
        element.requestFullScreen();
      }
      //IE11
      else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
      // Webkit (works in Safari5.1 and Chrome 15)
      else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
      }
      // Firefox (works in nightly)
      else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      }
    }
  }
};
</script>

将全局方法默认导出所有

准备globalFullScreen.js文件

/* 全屏 */
function fullScreen() {
  //若要全屏页面中某个div，var element= document.getElementById("divID");
  var element = document.documentElement;
  //IE 10及以下ActiveXObject
  if (window.ActiveXObject) {
    var WsShell = new ActiveXObject("WScript.Shell");
    WsShell.SendKeys("{F11}");
  }
  //HTML W3C 提议
  else if (element.requestFullScreen) {
    element.requestFullScreen();
  }
  //IE11
  else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
  // Webkit (works in Safari5.1 and Chrome 15)
  else if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }
  // Firefox (works in nightly)
  else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  }
}

export default fullScreen;

挂载到vue全局

import globalFullScreen from "@/utils/globalFullScreen";
Vue.prototype.$globalFullScreen = globalFullScreen;

在页面中使用

 <span @click="$globalFullScreen"></span>