vue进全屏和退出全屏

<template>
  <div>
    <div class="fullscreen-button" @click="toggleFullscreen" v-show="is">全屏</div>
    <div class="fullscreen-button" @click="toggleFullscreen" v-show="!is">退出全屏</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 设置flag用于判断是否进入全屏
      flag: 0,
      is:true
    };
  },
  methods: {
    // 点击按钮触发的方法
    toggleFullscreen() {
      this.is=!this.is
      console.log(this.is)
      this.flag++;
      this.flag % 2 == 0
        ? this.outFullCreeen(document)
        : this.FullCreeen(document.documentElement);
    },
    // 进入全屏的方法
    FullCreeen(element) {
      let el = element;
      let rfs =
        el.requestFullScreen ||
        el.webkitRequestFullScreen ||
        el.mozRequestFullScreen ||
        el.msRequestFullScreen;
      // Element.requestFullscreen() 此方法用于发出异步请求使元素进入全屏模式。
      // 调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，
      // document对象会收到一个fullscreenchange事件，通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可，则会收到一个fullscreenerror事件。
      if (typeof rfs != "undefined" && rfs) {
        rfs.call(el);
      } else if (typeof window.ActiveXObject != "undefined") {
        let wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
          wscript.SendKeys("{F11}");
        }
      }
    },
    //退出全屏的方法
    outFullCreeen(element) {
      let el = element;
      let cfs =
        el.cancelFullScreen ||
        el.webkitCancelFullScreen ||
        el.mozCancelFullScreen ||
        el.exitFullScreen;
      if (typeof cfs != "undefined" && cfs) {
        cfs.call(el);
      } else if (typeof window.ActiveXObject != "undefined") {
        let wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
          wscript.SendKeys("{F11}");
        }
      }
    },
  },
};
</script>

<style lang="scss">
.fullscreen-button:hover{
  cursor:pointer;
  color: blue;
}
</style>