From 3745a5aa6ede455be93b396643a12cf339a3e421 Mon Sep 17 00:00:00 2001 From: chenshiming <728988492@qq.com> Date: Mon, 4 Oct 2021 17:46:52 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(fullscreen):=20=E5=AE=8C=E6=88=90?= =?UTF-8?q?=E5=85=A8=E9=83=A8=E5=8A=9F=E8=83=BD=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/fullscreen/index.ts | 2 +- devui/fullscreen/src/fullscreen.scss | 4 +++ devui/fullscreen/src/fullscreen.tsx | 33 ++++++++-------------- docs/.vitepress/config/sidebar.ts | 2 +- docs/components/fullscreen/index.md | 42 ++++++++++++++++++++++++++-- 5 files changed, 57 insertions(+), 26 deletions(-) diff --git a/devui/fullscreen/index.ts b/devui/fullscreen/index.ts index 1cc6c868..6318965e 100644 --- a/devui/fullscreen/index.ts +++ b/devui/fullscreen/index.ts @@ -10,7 +10,7 @@ export { Fullscreen } export default { title: 'Fullscreen 全屏', category: '通用', - status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + status: '已完成', install(app: App): void { app.use(Fullscreen as any) diff --git a/devui/fullscreen/src/fullscreen.scss b/devui/fullscreen/src/fullscreen.scss index c0f01d4e..38689d36 100644 --- a/devui/fullscreen/src/fullscreen.scss +++ b/devui/fullscreen/src/fullscreen.scss @@ -14,3 +14,7 @@ .devui-fullscreen { overflow: hidden; } + +:not(:root):fullscreen::backdrop { + background: #ffffff; +} diff --git a/devui/fullscreen/src/fullscreen.tsx b/devui/fullscreen/src/fullscreen.tsx index 6f89226a..65136797 100644 --- a/devui/fullscreen/src/fullscreen.tsx +++ b/devui/fullscreen/src/fullscreen.tsx @@ -5,7 +5,6 @@ import { useSlots, renderSlot, onMounted, - onUnmounted, ref } from 'vue' import { fullscreenProps, FullscreenProps } from './fullscreen-types' @@ -18,6 +17,7 @@ export default defineComponent({ let currentTarget = ref(null) const isFullscreen = ref(false) + const slotElement = ref(null) const doc = document const onFullScreenChange = () => { @@ -44,6 +44,8 @@ export default defineComponent({ targetElement.setAttribute('style', `z-index: ${props.zIndex}`) } } + + // 退出正常全屏 const exitNormalFullscreen = (targetElement: HTMLElement) => { targetElement.classList.remove('fullscreen') targetElement.style.zIndex = null @@ -51,7 +53,8 @@ export default defineComponent({ // 事件监听 const handleFullscreen = async () => { - const targetElement = document.querySelector('[fullscreen-target]') + // const targetElement = document.querySelector('[fullscreen-target]') + const targetElement = slotElement.value.querySelector('[fullscreen-target]') let isFull = false // 判断模式 if (props.mode === 'normal') { // 浏览器全屏 @@ -70,16 +73,15 @@ export default defineComponent({ if (document.fullscreenElement || document.msFullscreenElement || document.webkitFullscreenElement) { isFull = await exitImmersiveFullScreen(document) } else { - isFull = await launchImmersiveFullScreen(document.documentElement) + isFull = await launchImmersiveFullScreen(currentTarget) } } - isFullscreen.value = isFull ctx.emit('fullscreenLaunch', isFullscreen.value) } const addFullScreenStyle = (): void => { - document.getElementsByTagName('html')[0].classList.add('devui-fullscreen'); + document.getElementsByTagName('html')[0].classList.add('devui-fullscreen') } const removeFullScreenStyle = (): void => { @@ -115,47 +117,36 @@ export default defineComponent({ } const handleKeyDown = (event) => { - if (event.keyCode === 'ESC_KEYCODE') { // 按ESC键退出全屏 + if (event.keyCode === 27) { // 按ESC键退出全屏 if (isFullscreen.value) { - const targetElement = document.querySelector('[fullscreen-target]') + const targetElement = slotElement.value.querySelector('[fullscreen-target]') if (props.mode === 'normal') { removeFullScreenStyle() exitNormalFullscreen(targetElement) } else { if (doc.fullscreenElement) { exitImmersiveFullScreen(doc) } } - ctx.emit('fullscreenLaunch', isFullscreen.value) isFullscreen.value = false + ctx.emit('fullscreenLaunch', isFullscreen.value) } } } onMounted (() => { - const btnLaunch = document.querySelector('[fullscreen-launch]') + const btnLaunch = slotElement.value.querySelector('[fullscreen-launch]') if (btnLaunch) { btnLaunch.addEventListener('click', handleFullscreen) } document.addEventListener('fullscreenchange', onFullScreenChange) document.addEventListener('MSFullscreenChange', onFullScreenChange) document.addEventListener('webkitfullscreenchange', onFullScreenChange) document.addEventListener('keydown', handleKeyDown) }) - onUnmounted (() => { - document.removeEventListener('fullscreenchange', onFullScreenChange) - document.removeEventListener('MSFullscreenChange', onFullScreenChange) - document.removeEventListener('webkitfullscreenchange', onFullScreenChange) - document.removeEventListener('keydown', handleKeyDown) - const btnLaunch = document.querySelector('[fullscreen-launch]') - if (btnLaunch) { btnLaunch.removeEventListener('click', handleFullscreen) } - }) return () => { const defaultSlot = renderSlot(useSlots(), 'default') // fullscreen-target 全屏元素属性 // fullscreen-launch 全屏事件属性 // if (defaultSlot.children.length === 0) throw new Error('未发现全屏元素') - // const targetElement = document.querySelector('[fullscreen-target]') return ( -
-
{ defaultSlot }
-
+
{ defaultSlot }
) } } diff --git a/docs/.vitepress/config/sidebar.ts b/docs/.vitepress/config/sidebar.ts index aca6bee6..58cf560a 100644 --- a/docs/.vitepress/config/sidebar.ts +++ b/docs/.vitepress/config/sidebar.ts @@ -7,7 +7,7 @@ const sidebar = { { text: 'Button 按钮', link: '/components/button/', status: '已完成' }, { text: 'Icon 图标', link: '/components/icon/', status: '已完成' }, { text: 'DragDrop 拖拽', link: '/components/dragdrop/' }, - { text: 'Fullscreen 全屏', link: '/components/fullscreen/' }, + { text: 'Fullscreen 全屏', link: '/components/fullscreen/', status: '已完成' }, { text: 'Panel 面板', link: '/components/panel/', status: '已完成' }, { text: 'Search 搜索框', link: '/components/search/', status: '已完成' }, { text: 'Status 状态', link: '/components/status/', status: '已完成' }, diff --git a/docs/components/fullscreen/index.md b/docs/components/fullscreen/index.md index 945770e7..bf943b24 100644 --- a/docs/components/fullscreen/index.md +++ b/docs/components/fullscreen/index.md @@ -8,9 +8,39 @@ ### 沉浸式全屏 -充满整个显示器屏幕的沉浸式全屏（待完善）。 +充满整个显示器屏幕的沉浸式全屏。 +:::demo +```vue + + +``` +::: ### 普通全屏 @@ -42,7 +72,7 @@ export default { btnContent, fullscreenLaunch } - }, + } } ``` @@ -54,4 +84,10 @@ export default { | :---------: | :------: | :-------: | :----------------------- | | mode | `immersive` 或 `normal` | `immersive` | 可选，设置全屏模式 | | zIndex | `Number` | 10 | 可选，设置全屏层级 | -| fullscreenLaunch | `EventEmitter` | | 可选，全屏之后的回调 | \ No newline at end of file +| fullscreenLaunch | `EventEmitter` | | 可选，全屏之后的回调 | + +**fullscreen-target** 选择器 +必含指令，内容投影，设置**需要全屏的元素**沉浸式全屏。 + +**fullscreen-launch** 选择器 +必含指令，内容投影，设置**触发**进入全屏的按钮沉浸式全屏。 \ No newline at end of file -- Gitee From 40f98152c2e59efbc45671eb356c7fc5b6acc8fd Mon Sep 17 00:00:00 2001 From: chenshiming <728988492@qq.com> Date: Mon, 4 Oct 2021 18:54:20 +0800 Subject: [PATCH 2/2] =?UTF-8?q?release:=20=E4=BF=AE=E5=A4=8D=E5=AD=98?= =?UTF-8?q?=E5=9C=A8=E5=86=B2=E7=AA=81=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vitepress/config/sidebar.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/.vitepress/config/sidebar.ts b/docs/.vitepress/config/sidebar.ts index 58cf560a..de3dc7ab 100644 --- a/docs/.vitepress/config/sidebar.ts +++ b/docs/.vitepress/config/sidebar.ts @@ -7,7 +7,7 @@ const sidebar = { { text: 'Button 按钮', link: '/components/button/', status: '已完成' }, { text: 'Icon 图标', link: '/components/icon/', status: '已完成' }, { text: 'DragDrop 拖拽', link: '/components/dragdrop/' }, - { text: 'Fullscreen 全屏', link: '/components/fullscreen/', status: '已完成' }, + { text: 'Fullscreen 全屏', link: '/components/fullscreen/' }, { text: 'Panel 面板', link: '/components/panel/', status: '已完成' }, { text: 'Search 搜索框', link: '/components/search/', status: '已完成' }, { text: 'Status 状态', link: '/components/status/', status: '已完成' }, -- Gitee