vue监听全屏

监听是否全屏以及退出全屏

<p>

        <span class="fullscreen" style @click="toggleFullScreen">

          <el-tooltip

            class="item"

            effect="dark"

            :content="isFullScreen?'退出全屏':'全屏'"

            placement="right"

          >

            <i :class="isFullScreen?'el-icon-aim':'el-icon-full-screen'"></i>

          </el-tooltip>

        </span>

      </p>

或者

<p @click="toggleFullScreen">

        <i :class="isFullScreen?'el-icon-aim':'el-icon-full-screen'"></i>  {{isFullScreen?'退出全屏':'全屏'}}

      </p>

export default {
  name: "bigmap",
  data() {
    return {
              isFullScreen: false, //是否全屏
              canFullScreen: false, //是否支持全屏
        }   
    },
    methods: {
        toggleFullScreen: function() {
      //切换全屏
      if (this.canFullScreen) {
        if (this.isFullScreen) {
          // 关闭全屏
          this.outFullCreeen(document);
          this.isFullScreen = false;
        } else {
          // 打开全屏
          this.inFullCreeen(document.documentElement);
          this.isFullScreen = true;
        }
      } else {
        this.$message.warning({
          content: "当前浏览器暂不支持全屏模式，请切换浏览器后重新尝试！",
          duration: 3
        });
      }
    },
    inFullCreeen: function(element) {
      //进入全屏
      this.showTarget();
      //this.isShow = true;
      let el = element;
      let rfs =
        el.requestFullScreen ||
        el.webkitRequestFullScreen ||
        el.mozRequestFullScreen ||
        el.msRequestFullScreen;
      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}");
        }
      }
      
      if (!this.isFullScreen) {
        this.isFullScreen = true;
        this.$bus.$emit("isQuan", "1");
        //this.play();
      }
    },
    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}");
        }
      }
      // let audio = document.querySelector('#myaudio');
      //this.audio.pause();
      if (this.isFullScreen == true) {
        this.pause();
        this.isFullScreen = false;
        this.$bus.$emit("isQuan", "2");
      }
    },
    addFullScreenListener() {
      //监听全屏
      const self = this;
      document.onkeydown = function(e) {
        if (e && e.keyCode === 122) {
          // 捕捉F11键盘动作
          e.preventDefault(); // 阻止F11默认动作
          self.toggleFullScreen();
        } else if (e.keyCode === 27) {
        }
      };
      // 监听不同浏览器的全屏事件，并件执行相应的代码
      switch (self.browserKernel) {
        case "webkit":
          document.onwebkitfullscreenchange = function() {
            if (document.webkitIsFullScreen) {
              self.isFullScreen = true;
            } else {
              self.isFullScreen = false;
            }
          };
          break;
        case "gecko":
          document.onmozfullscreenchange = function() {
            if (document.mozFullScreen) {
              self.isFullScreen = true;
            } else {
              self.isFullScreen = false;
            }
          };
          break;
        case "trident":
          document.onmsfullscreenchange = function() {
            if (document.msFullscreenElement) {
              self.isFullScreen = true;
            } else {
              self.isFullScreen = false;
            }
          };
          break;
        case "others":
          document.onfullscreenchange = function() {
            if (document.fullscreen) {
              self.isFullScreen = true;
            } else {
              self.isFullScreen = false;
            }
          };
          break;
        default:
          break;
      }
    }
}