vue 項目全屏插件screenfull使用案例

更新時間：2023年12月21日 14:46:55 作者：weixin_45665171

這篇文章主要介紹了vue 項目全屏插件screenfull使用案例,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

一、使用screenfull插件

1. npm安裝screenfull插件

npm install screenfull --save

提示：在vue項目中導入screenfull插件，出現(xiàn)編譯錯誤，錯誤如圖所示：

原因分析：
安裝的screenfull插件版本過高
解決方法：
降低插件版本

npm install screenfull@4.2.0 --save

2. 在vue文件中引入screenfull插件

import screenfull from 'screenfull'

3. vue文件demo

<template>
  <div>
    <ul>
      <li @click="clickFun">{{isFullFlag?'退出全屏':'全屏'}}</li>
      <li @click="clickFun1">{{isFullFlag1?'退出部分全屏':'部分全屏'}}</li>
    </ul>
    <!--需要全屏展示的內容-->
    <div id="content"></div>
  </div>
</template>

<script>
import screenfull from 'screenfull'
export default {
  name: "HelloWorld",
  data() {
    return {
      isFullFlag: false,
      isFullFlag1: false,
    }
  },
  mounted() {
    // 監(jiān)聽頁面全屏
    window.addEventListener("fullscreenchange", (e) => {
      console.log(screenfull.isFullscreen)
      this.isFullFlag = screenfull.isFullscreen
    })
  },
  methods: {
    clickFun() {
      this.isFullFlag = !this.isFullFlag
      console.log(screenfull)
      if (!screenfull.enabled) {
        this.$message({
          message: 'Your browser does not work',
          type: 'warning'
        })
        return false
      }
      screenfull.toggle()
    },
    clickFun1() {
      this.isFullFlag1 = !this.isFullFlag1
      const element = document.getElementById('content');//指定全屏區(qū)域元素
      if (this.isFullFlag1) {
        // screenfull.request(element);
        element.requestFullscreen()
      } else {
        document.exitFullscreen();
      }
    },
  },
};
</script>

4. 監(jiān)聽F11和手動的全屏、退出全屏事件

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

import screenfull from 'screenfull'
mounted() {
  this.screenFull();
},
methods: {
  //監(jiān)聽Esc事件；
  screenFull() {
    //監(jiān)聽f11事件
    window.addEventListener("keydown", this.KeyDown, true);
    //這些監(jiān)聽,可以監(jiān)聽到esc按鍵按下導致的全屏變化,但是監(jiān)聽不到F11的打開全屏的變化,isScreenFull
    document.addEventListener("fullscreenchange", () => {
      this.isFullscreen = !this.isFullscreen;//你要切換得圖標使用得屬性
    });
    document.addEventListener("mozfullscreenchange", () => {
      this.isFullscreen = !this.isFullscreen;
    });
    document.addEventListener("webkitfullscreenchange", () => {
      this.isFullscreen = !this.isFullscreen;
    });
    document.addEventListener("msfullscreenchange", () => {
      this.isFullscreen = !this.isFullscreen;
    });
  },
  KeyDown(event) {
    if (event.keyCode === 122) {
      event.returnValue = false;
      this.isScreenFull(); //觸發(fā)全屏的方法
    }
  },
  //全屏方法
  isScreenFull() {
    if (!screenfull.isEnabled) {
      return false;
    }
    // 這個方法會請求全屏，如果當前是全屏則會退出全屏。
    // 無需自己再判斷當前屏幕狀態(tài)
    screenfull.toggle();
  },
}