vue+element ui 设置页面全屏全屏和退出全屏的切换

最新推荐文章于 2025-07-04 10:00:58 发布

祁同伟拿大狙

最新推荐文章于 2025-07-04 10:00:58 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/dccose/article/details/126919218

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍两种在Vue项目中实现页面全屏的方法：一是利用screenfull插件，二是通过JavaScript原生API。提供了详细的代码示例及步骤说明。

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

vue+element ui 设置页面全屏全屏和退出全屏的切换

方式1

screenfull 插件

// 属性
screenfull.isFullscreen; // 判断当前页是否全屏 返回类型 布尔值（true/false）
screenfull.isEnabled; // 判断当前浏览器是否支持全屏 返回类型 布尔值（true/false）
 
//方法
screenfull.request(); // 全屏
screenfull.exit(); // 退出全屏
screenfull.toggle(); // 全屏切换

安装插件
- 1.yarn add screenfull 或者 npm i screenfull
引入插件
- 2.在页面进行引入 import screenfull from 'screenfull'
使用插件
- 3 参考代码：

<template>
 <div class="hed_rig">
   <!-- 三目运算 展示对应ico -->
   <i :class=" this.iFullScreen? 'el-icon-copy-document headerIco': ' el-icon-full-screen headerIco'"
       title="全屏/退出全屏"
       @click="toggleFullScreen" >
   </i>      
 </div>     
</template>
<script>            
 // 引入全屏插件
import screenfull from 'screenfull'           
export default {
  name: 'test',
  data() {
    return {  
	iFullScreen: false,
  		}
	},
	methods: {
    // 页面全屏事件
    toggleFullScreen() {
      // 判断当前浏览器是否支持全屏
      if (screenfull.isEnabled) {
        //当前页面是否全屏
        if (!screenfull.isFullscreen) {
          this.iFullScreen = !this.iFullScreen
          screenfull.request()
        } else {
          this.iFullScreen = !this.iFullScreen
          screenfull.exit()
        }
      } else {
      //提醒 无法全屏浏览
        this.$message({ message: '你的浏览器不支持全屏', type: 'warning' })
      }
    },
  },

}

方式2

通过 js 实现

<template>
  <div>
    <el-button type="primary" @click="screen">全屏</el-button>
  </div>
</template>

<script>
export default {
  name: 'indexAss',

  data() {
    return {
      fullscreen: false,
    }
  },

  methods: {
    screen() {
      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
    },
  },
}
</script>