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

style(fullscreen): 代码格式调整

Browse Source
This commit is contained in:
sight 2022-02-17 23:54:29 +08:00
parent c10e1a2799
commit eab08ee9b9
1 changed files with 35 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/component/fullscreen/index.vue
View File

@ -118,14 +118,18 @@ async function enter(targetEl: HTMLElement | undefined) {
let fullscreenEnter = null; let fullscreenEnter = null;
if (props.immersive) { if (props.immersive) {
// @ts-ignore // @ts-ignore
fullscreenEnter = Promise.resolve(targetEl[fullscreenAPI.requestFullscreen]()); fullscreenEnter = Promise.resolve(
targetEl[fullscreenAPI.requestFullscreen]()
);
} else { } else {
styleLayFullscreen(targetEl, false); styleLayFullscreen(targetEl, false);
fullscreenEnter = Promise.resolve(targetEl?.classList.add('layui-fullscreen')); fullscreenEnter = Promise.resolve(
targetEl?.classList.add("layui-fullscreen")
);
} }
return await fullscreenEnter?.then(() => { return await fullscreenEnter?.then(() => {
isFullscreen.value = true; isFullscreen.value = true;
emit('fullscreenchange', isFullscreen.value); emit("fullscreenchange", isFullscreen.value);
return !!document.fullscreenElement; return !!document.fullscreenElement;
}); });
} }
@ -144,11 +148,13 @@ async function exit(targetEl: HTMLElement | Document | undefined) {
} else { } else {
if (targetEl instanceof Document) return; if (targetEl instanceof Document) return;
styleLayFullscreen(targetEl, true); styleLayFullscreen(targetEl, true);
fullscreenExit = Promise.resolve(targetEl?.classList.remove('layui-fullscreen')) fullscreenExit = Promise.resolve(
targetEl?.classList.remove("layui-fullscreen")
);
} }
return await fullscreenExit?.then(() => { return await fullscreenExit?.then(() => {
isFullscreen.value = false; isFullscreen.value = false;
emit('fullscreenchange', isFullscreen.value); emit("fullscreenchange", isFullscreen.value);
return !!document.fullscreenElement; return !!document.fullscreenElement;
}); });
} }
@ -158,10 +164,10 @@ async function exit(targetEl: HTMLElement | Document | undefined) {
*/ */
async function toggle() { async function toggle() {
if (isFullscreen.value) { if (isFullscreen.value) {
await exit(activeEl.value) await exit(activeEl.value);
} else { } else {
await enter(activeEl.value) await enter(activeEl.value);
}; }
} }
/** /**
@ -169,17 +175,20 @@ async function toggle() {
* @param el HTML 元素 * @param el HTML 元素
* @param isRemove 是否移除样式 * @param isRemove 是否移除样式
*/ */
const styleLayFullscreen = function (el: HTMLElement, isRemove: boolean = false) { const styleLayFullscreen = function (
el.style.position = isRemove ? "" : (props.position || ""); el: HTMLElement,
el.style.zIndex = isRemove ? "" : (props.zIndex || ""); isRemove: boolean = false
) {
el.style.position = isRemove ? "" : props.position || "";
el.style.zIndex = isRemove ? "" : props.zIndex || "";
// 实验内容 // 实验内容
// el.style.top = isRemove ? "" : (props.top || ""); // el.style.top = isRemove ? "" : (props.top || "");
// el.style.left = isRemove ? "" : (props.left || ""); // el.style.left = isRemove ? "" : (props.left || "");
// el.style.width = isRemove ? "" : (props.width || ""); // el.style.width = isRemove ? "" : (props.width || "");
// el.style.height = isRemove ? "" : (props.height || ""); // el.style.height = isRemove ? "" : (props.height || "");
} };
const activeEl = computed(() => targetEl.value = props.target); const activeEl = computed(() => (targetEl.value = props.target));
/** /**
* 处理 fullscreenchange 和浏览器窗口内全屏 Escape 按键事件 * 处理 fullscreenchange 和浏览器窗口内全屏 Escape 按键事件
@ -189,26 +198,32 @@ const onFullscreenchange = function (event: KeyboardEvent) {
if (isFullscreen.value && !document.fullscreenElement) { if (isFullscreen.value && !document.fullscreenElement) {
if (props.immersive) { if (props.immersive) {
isFullscreen.value = false; isFullscreen.value = false;
emit('fullscreenchange', isFullscreen.value); emit("fullscreenchange", isFullscreen.value);
} else if (event.key === 'Escape') { } else if (event.key === "Escape") {
exit(activeEl.value); exit(activeEl.value);
} }
} }
} };
onMounted(() => { onMounted(() => {
//@ts-ignore //@ts-ignore
document.addEventListener(fullscreenAPI.fullscreenchange, onFullscreenchange); document.addEventListener(fullscreenAPI.fullscreenchange, onFullscreenchange);
document.addEventListener('keydown', onFullscreenchange); document.addEventListener("keydown", onFullscreenchange);
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
//@ts-ignore //@ts-ignore
document.addEventListener(fullscreenAPI.fullscreenchange, onFullscreenchange); document.addEventListener(fullscreenAPI.fullscreenchange, onFullscreenchange);
document.addEventListener('keydown', onFullscreenchange); document.addEventListener("keydown", onFullscreenchange);
}); });
</script> </script>
<template> <template>
<slot name="default" :isFullscreen="isFullscreen" :enter="enter" :exit="exit" :toggle="toggle"></slot> <slot
name="default"
:isFullscreen="isFullscreen"
:enter="enter"
:exit="exit"
:toggle="toggle"
></slot>
</template> </template>