进入/退出全屏

进入/退出全屏

<template>
  <div>
    <button @click="full">进入全屏</button>
    <button @click="fullPart">某个元素进入全屏</button>
    <button @click="exit">退出全屏</button>
    <div class="container">喔喔</div>
  </div>
</template>


<script>
export default {
  methods: {
    /**
     * @author mygoes mynameiszhayu@163.com
     * @description 进入全屏
     */
    launchFullscreen(element) {
      if (element.requestFullscreen) {
        // W3C：
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        // FireFox：
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        // IE11：
        element.msRequestFullscreen();
      } else if (element.webkitRequestFullscreen) {
        // Chrome等：
        element.webkitRequestFullScreen();
      }
    },

    /**
     * @author mygoes mynameiszhayu@163.com
     * @description 退出全屏
     */
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
    
    full() {
      this.launchFullscreen(document.documentElement);
    },
    
    fullPart() {
      this.launchFullscreen(document.querySelector(".container")); //某个元素进入全屏
    },
    
    exit() {
      this.exitFullscreen();
    },
  },
};
</script>

项目源码