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

Posted 2021-08-30 尔嵘

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);
        }
      });//实现模块全屏
}