安装

npm install screenfull --save

使用方法

import screenfull from "screenfull";

属性

screenfull.isFullscreen; // 布尔值——当前页面是否全屏
screenfull.isEnabled; // 布尔值——当前浏览器是否支持全屏

方法

默认作用于全屏，若想作用于指定元素，则将指定元素作为参数传入。

screenfull.request(); // 全屏
screenfull.exit(); // 退出全屏
screenfull.toggle(); // 全屏切换

使用范例

整页全屏

vue 全屏 screenfull —— 整页全屏，指定元素全屏，退出全屏，全屏切换等_当前页

<i class="el-icon-full-screen" @click="fullScreen"></i>
fullScreen() {
      if (screenfull.isEnabled && !screenfull.isFullscreen) {
        screenfull.request();
      }
    },

整页退出全屏

vue 全屏 screenfull —— 整页全屏，指定元素全屏，退出全屏，全屏切换等_ico_02

<i class="icon-exit-screen" @click="exitFullScreen"></i>
exitFullScreen() {
  if (screenfull.isEnabled && screenfull.isFullscreen) {
    screenfull.exit();
  }
},

全屏切换

vue 全屏 screenfull —— 整页全屏，指定元素全屏，退出全屏，全屏切换等_当前页_03

<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);
  }
},