From 763b5cc97a05ddb8f720cefdc98265d1d5c48107 Mon Sep 17 00:00:00 2001
From: sight <1453017105@qq.com>
Date: Tue, 10 May 2022 15:45:16 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(fullscreen):=20=E5=85=88=E6=8C=89?=
 =?UTF-8?q?=20F11=20=E8=BF=9B=E5=85=A5=E5=85=A8=E5=B1=8F,=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E9=80=80=E5=87=BA=E5=85=A8=E5=B1=8F=E4=B8=8D=E7=94=9F?=
 =?UTF-8?q?=E6=95=88=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ISSUES CLOSED: #I56O9X
---
 .../src/component/fullscreen/index.vue          | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/package/component/src/component/fullscreen/index.vue b/package/component/src/component/fullscreen/index.vue
index 60800e21..2bae78d0 100644
--- a/package/component/src/component/fullscreen/index.vue
+++ b/package/component/src/component/fullscreen/index.vue
@@ -184,7 +184,7 @@ const activeEl = computed(() => (targetEl.value = props.target));
 
 /**
  * 处理 fullscreenchange 和浏览器窗口内全屏 Escape 按键事件
- * @param event Escape 键盘事件
+ * @param event 键盘事件
  */
 const onFullscreenchange = function (event: KeyboardEvent) {
   if (isFullscreen.value && !document.fullscreenElement) {
@@ -197,10 +197,24 @@ const onFullscreenchange = function (event: KeyboardEvent) {
   }
 };
 
+/**
+ * 屏蔽 F11 按键原生事件,用 fullscreenAPI 代替 
+ * @param event 键盘事件
+ */
+const onKeydownF11 = function(event: KeyboardEvent) {
+  // DOM 根节点全屏
+  let isRootNodeFullscreen = props.immersive && (!activeEl.value || activeEl.value === defaultElement)
+  if(event.key === "F11" && isRootNodeFullscreen){
+    event.preventDefault();
+    toggle();
+  }
+}
+
 onMounted(() => {
   //@ts-ignore
   document.addEventListener(fullscreenAPI.fullscreenchange, onFullscreenchange);
   document.addEventListener("keydown", onFullscreenchange);
+  document.addEventListener("keydown", onKeydownF11);
 });
 
 onBeforeUnmount(() => {
@@ -210,6 +224,7 @@ onBeforeUnmount(() => {
     onFullscreenchange
   );
   document.removeEventListener("keydown", onFullscreenchange);
+  document.removeEventListener("keydown", onKeydownF11);
 });
 </script>