<template>
  <div>
    <button v-if="!ifFullScreen" @click="fullScreenPage">整个页面全屏</button>
    <button v-if="ifFullScreen" @click="exitFullScreen">退出全屏</button>
    <button @click="fullScreenPart('fatherID')">指定元素全屏</button>
    <div class="box" id="fatherID"></div>
  </div>
</template>

<script>export default {
  mounted() {
    // 监听浏览器全屏事件
    let that = this;
    document.addEventListener("fullscreenchange", function() {
      that.getFullScreenStatus();
    });

    document.addEventListener("mozfullscreenchange", function() {
      that.getFullScreenStatus();
    });

    document.addEventListener("webkitfullscreenchange", function() {
      that.getFullScreenStatus();
    });

    document.addEventListener("msfullscreenchange", function() {
      that.getFullScreenStatus();
    });
  },
  data() {
    return {
      ifFullScreen: false,
    };
  },
  methods: {
    // 整个页面全屏
    fullScreenPage() {
      fullScreen(document.documentElement);
    },
    // 指定元素全屏——指定元素必须设置id，且全屏函数只对id获取元素有效
    fullScreenPart(id) {
      let el = document.getElementById(id);
      fullScreen(el);
    },
    // 退出全屏
    exitFullScreen() {
      exitFullScreen(document.documentElement);
    },
    // 判断当前页面是否全屏
    getFullScreenStatus() {
      this.ifFullScreen = !!(
        document.fullscreen ||
        document.mozFullScreen ||
        document.webkitIsFullScreen ||
        document.webkitFullScreen ||
        document.msFullScreen
      );
    },
  },
};

// 进入全屏
function fullScreen(el) {
  var rfs =
      el.requestFullScreen ||
      el.webkitRequestFullScreen ||
      el.mozRequestFullScreen ||
      el.msRequestFullScreen,
    wscript;
  if (typeof rfs != "undefined" && rfs) {
    rfs.call(el);
    return;
  }
  if (typeof window.ActiveXObject != "undefined") {
    wscript = new ActiveXObject("WScript.Shell");
    if (wscript) {
      wscript.SendKeys("{F11}");
    }
  }
}
// 退出全屏
function exitFullScreen(el) {
  var el = document,
    cfs =
      el.cancelFullScreen ||
      el.webkitCancelFullScreen ||
      el.mozCancelFullScreen ||
      el.exitFullScreen,
    wscript;
  if (typeof cfs != "undefined" && cfs) {
    cfs.call(el);
    return;
  }
  if (typeof window.ActiveXObject != "undefined") {
    wscript = new ActiveXObject("WScript.Shell");
    if (wscript != null) {
      wscript.SendKeys("{F11}");
    }
  }
}</script>

<style scoped>.box {
  height: 200px;
  width: 100px;
  background: green;
}

/*全屏伪类：当元素处于全屏时，改变元素的背景色*/
.box:-webkit-full-screen {
  background-color: yellow;
}

.box:-moz-full-screen {
  background-color: yellow;
}

.box:fullscreen {
  background-color: yellow;
}</style>