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

最新推荐文章于 2025-04-01 15:45:39 发布

原创

最新推荐文章于 2025-04-01 15:45:39 发布 · 3.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

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

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>     
<