theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🐛(fullscreen): 先按 F11 进入全屏,组件退出全屏不生效的问题

Browse Source 
ISSUES CLOSED: #I56O9X
This commit is contained in:
sight 2022-05-10 15:45:16 +08:00
parent 1f605715fc
commit 763b5cc97a
1 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
package/component/src/component/fullscreen/index.vue
View File

@ -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>