实现放大全屏，退出全屏模式

在common.js中：

// 全屏
export function requestFullScreen(element) {
  const docElm = element;
  if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
  } else if (docElm.msRequestFullscreen) {
    docElm.msRequestFullscreen();
  } else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
  } else if (docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen();
  }
}

// 退出全屏
export function exitFullscreen() {
  const de = window.parent.document;

  if (de.exitFullscreen) {
    de.exitFullscreen();
  } else if (de.mozCancelFullScreen) {
    de.mozCancelFullScreen();
  } else if (de.webkitCancelFullScreen) {
    de.webkitCancelFullScreen();
  } else if (de.msExitFullscreen) {
    de.msExitFullscreen();
  }
}
// 是否支持全屏
export function isFullscreen() {
  return (
    document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
  );
}

一般按钮都会在投足组件中出现：

 

 DOM部分：

<div class="buttons">
        <div class="mac-button red" @click="goTheme">
          <span class="iconfont icon-icon-home"></span>
        </div>
        <div class="mac-button yellow" @click="exitFullScreen">
          <span class="iconfont icon-suoxiao2"></span>
        </div>
        <div class="mac-button green" @click="fullScreen">
          <span class="iconfont icon-icon-fangda"></span>
        </div>
</div>

methods：

  methods: {
    goTheme() {
      this.$router.push('/discovery');
    },
    fullScreen() {
      requestFullScreen(document.documentElement);
    },
    exitFullScreen() {
      if (isFullscreen) {
        exitFullscreen();
      }
    }
  }