js设置全屏显示和取消全屏显示，实现F11功能

用生命在耍帅ㅤ

于 2023-05-11 20:37:36 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue element ui HTML5+JQ+JS 文章标签： javascript 前端 html vue

本文链接：https://blog.csdn.net/weixin_43583693/article/details/130630156

element ui 同时被 3 个专栏收录

27 篇文章

订阅专栏

HTML5+JQ+JS

26 篇文章

订阅专栏

vue

17 篇文章

订阅专栏

该代码段展示了一个使用Vue.js编写的组件，点击按钮可以实现页面的全屏和退出全屏功能。按钮的文字会根据当前状态切换，利用JavaScript的全屏API来控制全屏状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击后

<template>
	<div>
		  <el-button type="primary" @click="butClick()">{{content}}</el-button>
	</div>
</template>


<script>
	export default {
		data() {
			return {
				content: '全屏显示',
				type:false
			};
		},
		watch: {

		},
		methods: {
			butClick(){
				if(this.type){
					this.content = "全屏显示";
                    // 取消全屏
					if(document.exitFullscreen){
						document.exitFullscreen()
					}else if(document.webkitCancelFullScreen){
						document.webkitCancelFullScreen()
					}else if(document.mozCancelFullScreen){
						document.mozCancelFullScreen()
					}else if(document.msExitFulldcreen){
						document.msExitFulldcreen()
					}
					this.type = false
				}else{
					this.content = "取消全屏";
                    // 全屏
					var element = document.documentElement
					if(element.requestFullscreen){
						element.requestFullscreen()
					}else if(element.webkitRequestFullScreen){
						element.webkitRequestFullScreen()
					}else if(element.mozRequestFullScreen){
						element.mozRequestFullScreen()
					}else if(element.msRequestFulldcreen){
						element.msRequestFulldcreen()
					}
					this.type = true
				}
			}
		}
	}
</script>