vue中实现页面全屏和指定元素全屏

1.vue中如何快速实现页面的全屏？

案例1：点击fullScreen按钮（icon），实现整个页面的全屏：

代码：

<a-icon type="fullscreen" 
    style="font-size: 22px;margin-left: 10px;" 
    id="fullscreen_button" 
    @click="handleFullScreen()"
/>

export default {
  name: "index",
  data(){
    return{
      fullscreen: false
    }
  },
  methods:{
    handleFullScreen(){
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    }
  }
}

2.vue中如何实现页面的指定元素全屏？

安装依赖(有淘宝镜像用cnpm，没有就npm)：

cnpm install screenfull --save

引入需要全屏的页面中使用：

import screenfull from "screenfull";

给要点击实现全屏的按钮和全屏的区域元素设置id：

<a-icon type="fullscreen" 
    style="font-size: 22px;margin-left: 10px;" 
    id="fullscreen_button"/>

<div id="container_max">
    <a-row :gutter="24">
        <a-col :sm="24" :md="18" :xl="18">
            <div
               :style="{ width: '100%', height: scrollHeight - 60 + 'px', border: '1px solid #ccc', padding: '10px' }">
                <h3 style="font-weight: bolder;">图片</h3>
                <img src="../../assets/images/confImg.jpg" alt="" style="width: 100%; height: 100%;">
             </div>
        </a-col>
        <a-col :sm="24" :md="6" :xl="6">
            <div :style="{ width: '100%', height: scrollHeight - 60 + 'px', border: '1px solid #ccc', padding: '10px' }">
                <h3 style="font-weight: bolder;">视频</h3>
                <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" autoplay controls style="width: 100%; height: auto;"></video>
            </div>
        </a-col>
    </a-row>
</div>

mounted() {
      const element = document.getElementById('container_max');//指定全屏区域元素
      document.getElementById('fullscreen_button').addEventListener('click', () => {
        if (screenfull.isEnabled) {
          screenfull.request(element);
        }
      });//实现模块全屏
}

3.vue中如何实现全屏时候Esc按键功能？

//是否全屏并按键ESC键的方法
fullscreenElement() {
    var fullscreenEle = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
    return fullscreenEle;
},

全屏时候防抖：

//全屏
    fullscreenDocument: debounce(
      function() {
        let fullHome = document.getElementById("home");
        document.getElementById("home").style.height = "100%";
        if (this.fullscreen) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        } else {
          if (fullHome.requestFullscreen) {
            fullHome.requestFullscreen();
          } else if (fullHome.webkitRequestFullScreen) {
            fullHome.webkitRequestFullScreen();
          } else if (fullHome.mozRequestFullScreen) {
            fullHome.mozRequestFullScreen();
          } else if (fullHome.msRequestFullscreen) {
            // IE11
            fullHome.msRequestFullscreen();
          }
        }
        this.fullscreen = !this.fullscreen;
      },
      1000,
      { leading: true, trailing: false }
    ),