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 }
    ),