vue 实现全屏展示

安装：

npm i screenfull

引入 : import screenfull from "screenfull"

screenfull属性:

// screenfull.request(); // 全屏
//screenfull.exit(); // 退出全屏
//screenfull.toggle(); // 全屏切换
// screenfull.isEnabled 是否支持全屏
// screenfull.isFullscreen 是否全屏

全屏展示

<i class="el-icon-full-screen" @click="allshow"></i>

allshow() {
  if (screenfull.isEnabled && !screenfull.isFullscreen) {
    screenfull.request();
  }
},

效果：

 切换:

<i class="el-icon-data-line" @click="toggleFullScreen"></i>

toggleFullScreen() {
  if (screenfull.isEnabled) {
     screenfull.toggle();
  }
}

点击进行全屏和非全屏进行切换

局部全屏

<img ref="myImg" width="100" src="../assets/56eb5ff6dc6cfc8f970f8f32bc02f00.png" alt="" />
        <i class="el-icon-data-line" @click="toggleFullScreen"></i>

toggleFullScreen() {
  if (screenfull.isEnabled) {
    screenfull.toggle(this.$refs.myImg);
  }
}