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

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>