安装
npm install screenfull --save
使用方法
import screenfull from "screenfull";
属性
screenfull.isFullscreen; // 布尔值——当前页面是否全屏 screenfull.isEnabled; // 布尔值——当前浏览器是否支持全屏
方法
默认作用于全屏，若想作用于指定元素，则将指定元素作为参数传入。
screenfull.request(); // 全屏 screenfull.exit(); // 退出全屏 screenfull.toggle(); // 全屏切换
使用范例
整页全屏
<i class="el-icon-full-screen" @click="fullScreen"></i>
fullScreen() { if (screenfull.isEnabled && !screenfull.isFullscreen) { screenfull.request(); } },
整页退出全屏
<i class="icon-exit-screen" @click="exitFullScreen"></i>
exitFullScreen() { if (screenfull.isEnabled && screenfull.isFullscreen) { screenfull.exit(); } },
全屏切换
<i class="el-icon-data-line" @click="toggleFullScreen"></i>
toggleFullScreen() { if (screenfull.isEnabled) { screenfull.toggle(); } },
指定元素全屏
<img ref="myImg" width="100" src="https://tenfei02.cfp.cn/creative/vcg/veer/1600water/veer-385736296.jpg" alt="" /> <i class="el-icon-data-line" @click="toggleFullScreen"></i>
toggleFullScreen() { if (screenfull.isEnabled) { screenfull.toggle(this.$refs.myImg); } },
