vue中实现浏览器全屏与退出全屏功能

Posted 2023-04-16

参考技术A 在 <template> 标签中主要是放一个全屏与退出全屏的按钮，并绑定上点击事件 fullScreenClick 。全屏与退出全屏的按钮显示切换是通过变量 fullScreen 控制的。

在js中，设置当前全屏状态的初始值为 false 。由于全屏状态下 ，按 "Esc" 键退出全屏，浏览器监听不到 "Esc" 键的事件，所以需要通过浏览器窗口大小改变的事件去触发退出全屏事件。（如果全屏是单一页面的功能，记得在组件销毁的时候清除掉 window 中 resize 事件的绑定）。

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