fix: 第一次F11后无法退出全屏的问题

package-lock.json

@@ -3497,11 +3497,6 @@
         "source-map-js": ">=0.6.2 <2.0.0"
       }
     },
-    "screenfull": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmmirror.com/screenfull/-/screenfull-6.0.2.tgz",
-      "integrity": "sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw=="
-    },
     "scule": {
       "version": "0.3.2",
       "resolved": "https://registry.npmmirror.com/scule/-/scule-0.3.2.tgz",

package.json

@@ -22,7 +22,6 @@
     "path-to-regexp": "6.2.1",
     "pinia": "2.0.20",
     "sass": "1.54.5",
-    "screenfull": "6.0.2",
     "vue": "3.2.38",
     "vue-router": "4.1.5"
   },

src/components/Screenfull/index.vue

@@ -6,7 +6,7 @@
 
 <script>
 import { defineComponent } from 'vue';
-import screenfull from 'screenfull';
+import screenfull, { bindF11, unbindF11 } from '@/utils/screenfull';
 
 export default defineComponent({
   name: 'Screenfull',
@@ -17,9 +17,11 @@ export default defineComponent({
   },
   mounted() {
     this.init();
+    bindF11();
   },
   beforeUnmount() {
     this.destroy();
+    unbindF11();
   },
   methods: {
     click() {
@@ -34,7 +36,7 @@ export default defineComponent({
       screenfull.toggle();
     },
     handleChange() {
-      console.log('handleChange', screenfull.isFullscreen);
+      console.log('screenfull.handleChange', screenfull.isFullscreen);
       this.isFullscreen = screenfull.isFullscreen;
     },
     init() {

src/utils/screenfull.js

@@ -0,0 +1,173 @@
+const methodMap = [
+  [
+    'requestFullscreen',
+    'exitFullscreen',
+    'fullscreenElement',
+    'fullscreenEnabled',
+    'fullscreenchange',
+    'fullscreenerror'
+  ],
+  // New WebKit
+  [
+    'webkitRequestFullscreen',
+    'webkitExitFullscreen',
+    'webkitFullscreenElement',
+    'webkitFullscreenEnabled',
+    'webkitfullscreenchange',
+    'webkitfullscreenerror'
+
+  ],
+  // Old WebKit
+  [
+    'webkitRequestFullScreen',
+    'webkitCancelFullScreen',
+    'webkitCurrentFullScreenElement',
+    'webkitCancelFullScreen',
+    'webkitfullscreenchange',
+    'webkitfullscreenerror'
+
+  ],
+  [
+    'mozRequestFullScreen',
+    'mozCancelFullScreen',
+    'mozFullScreenElement',
+    'mozFullScreenEnabled',
+    'mozfullscreenchange',
+    'mozfullscreenerror'
+  ],
+  [
+    'msRequestFullscreen',
+    'msExitFullscreen',
+    'msFullscreenElement',
+    'msFullscreenEnabled',
+    'MSFullscreenChange',
+    'MSFullscreenError'
+  ]
+];
+
+const nativeAPI = (() => {
+  if (typeof document === 'undefined') {
+    return false;
+  }
+
+  const unprefixedMethods = methodMap[0];
+  const returnValue = {};
+
+  for (const methodList of methodMap) {
+    const exitFullscreenMethod = methodList?.[1];
+    if (exitFullscreenMethod in document) {
+      for (const [index, method] of methodList.entries()) {
+        returnValue[unprefixedMethods[index]] = method;
+      }
+
+      return returnValue;
+    }
+  }
+
+  return false;
+})();
+
+const eventNameMap = {
+  change: nativeAPI.fullscreenchange,
+  error: nativeAPI.fullscreenerror
+};
+
+let screenfull = {
+  // eslint-disable-next-line default-param-last
+  request(element = document.documentElement, options) {
+    return new Promise((resolve, reject) => {
+      const onFullScreenEntered = () => {
+        screenfull.off('change', onFullScreenEntered);
+        resolve();
+      };
+
+      screenfull.on('change', onFullScreenEntered);
+
+      const returnPromise = element[nativeAPI.requestFullscreen](options);
+
+      if (returnPromise instanceof Promise) {
+        returnPromise.then(onFullScreenEntered).catch(reject);
+      }
+    });
+  },
+  exit() {
+    return new Promise((resolve, reject) => {
+      if (!screenfull.isFullscreen) {
+        resolve();
+        return;
+      }
+
+      const onFullScreenExit = () => {
+        screenfull.off('change', onFullScreenExit);
+        resolve();
+      };
+
+      screenfull.on('change', onFullScreenExit);
+
+      const returnPromise = document[nativeAPI.exitFullscreen]();
+
+      if (returnPromise instanceof Promise) {
+        returnPromise.then(onFullScreenExit).catch(reject);
+      }
+    });
+  },
+  toggle(element, options) {
+    return screenfull.isFullscreen ? screenfull.exit() : screenfull.request(element, options);
+  },
+  onchange(callback) {
+    screenfull.on('change', callback);
+  },
+  onerror(callback) {
+    screenfull.on('error', callback);
+  },
+  on(event, callback) {
+    const eventName = eventNameMap[event];
+    if (eventName) {
+      document.addEventListener(eventName, callback, false);
+    }
+  },
+  off(event, callback) {
+    const eventName = eventNameMap[event];
+    if (eventName) {
+      document.removeEventListener(eventName, callback, false);
+    }
+  },
+  raw: nativeAPI
+};
+
+Object.defineProperties(screenfull, {
+  isFullscreen: {
+    get: () => Boolean(document[nativeAPI.fullscreenElement])
+  },
+  element: {
+    enumerable: true,
+    get: () => document[nativeAPI.fullscreenElement] ?? undefined
+  },
+  isEnabled: {
+    enumerable: true,
+    // Coerce to boolean in case of old WebKit.
+    get: () => Boolean(document[nativeAPI.fullscreenEnabled])
+  }
+});
+
+const handleKeydown = (event) => {
+  if (event.keyCode === 122) { // F11的keyCode为122
+    event.preventDefault();
+    screenfull.toggle();
+  }
+};
+
+// 避免chrome浏览器，F11进入全屏后，无法用js退出全屏
+export const bindF11 = () => {
+  window.addEventListener('keydown', handleKeydown, true);
+};
+
+export const unbindF11 = () => {
+  window.removeEventListener('keydown', handleKeydown, true);
+};
+
+if (!nativeAPI) {
+  screenfull = { isEnabled: false };
+}
+
+export default screenfull;