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/4] =?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/4] =?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 From 004bdf6c7369542085773595a4749c2fc2e78b59 Mon Sep 17 00:00:00 2001 From: chenshiming <728988492@qq.com> Date: Tue, 5 Oct 2021 14:56:02 +0800 Subject: [PATCH 3/4] =?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=EF=BC=88?= =?UTF-8?q?=E6=B2=89=E6=B5=B8=E5=BC=8F=E3=80=81=E6=99=AE=E9=80=9A=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/fullscreen/src/fullscreen.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/devui/fullscreen/src/fullscreen.tsx b/devui/fullscreen/src/fullscreen.tsx index 65136797..d71c606c 100644 --- a/devui/fullscreen/src/fullscreen.tsx +++ b/devui/fullscreen/src/fullscreen.tsx @@ -142,8 +142,6 @@ export default defineComponent({ }) return () => { const defaultSlot = renderSlot(useSlots(), 'default') - // fullscreen-target 全屏元素属性 - // fullscreen-launch 全屏事件属性 // if (defaultSlot.children.length === 0) throw new Error('未发现全屏元素') return (
{ defaultSlot }
-- Gitee From 9c5d18b13bda562db4db6ac0159e0b2a74fa8263 Mon Sep 17 00:00:00 2001 From: MICD Date: Tue, 5 Oct 2021 14:27:29 +0000 Subject: [PATCH 4/4] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20docs?= =?UTF-8?q?/.vitepress/config/sidebar.ts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vitepress/config/sidebar.ts | 211 ------------------------------ 1 file changed, 211 deletions(-) delete mode 100644 docs/.vitepress/config/sidebar.ts diff --git a/docs/.vitepress/config/sidebar.ts b/docs/.vitepress/config/sidebar.ts deleted file mode 100644 index ca883a78..00000000 --- a/docs/.vitepress/config/sidebar.ts +++ /dev/null @@ -1,211 +0,0 @@ -export default { - '/': [ - { - "text": "快速开始", - "link": "/" - }, - { - "text": "通用", - "children": [ - { - "text": "Button 按钮", - "link": "/components/button/" - }, - { - "text": "Fullscreen 全屏", - "link": "/components/fullscreen/", - "status": "已完成" - }, - { - "text": "Icon 图标", - "link": "/components/icon/" - }, - { - "text": "Overlay 遮罩层", - "link": "/components/overlay/" - }, - { - "text": "Panel 面板", - "link": "/components/panel/" - }, - { - "text": "Ripple 水波纹", - "link": "/components/ripple/" - }, - { - "text": "Search 搜索框", - "link": "/components/search/" - }, - { - "text": "Status 状态", - "link": "/components/status/" - }, - { - "text": "Sticky 便贴", - "link": "/components/sticky/" - } - ] - }, - { - "text": "导航", - "children": [ - { - "text": "Accordion 手风琴", - "link": "/components/accordion/" - }, - { - "text": "Anchor 锚点", - "link": "/components/anchor/" - }, - { - "text": "InputNumber 数字输入框", - "link": "/components/input-number/" - }, - { - "text": "Pagination 分页", - "link": "/components/pagination/", - "status": "已完成" - }, - { - "text": "StepsGuide 操作指引", - "link": "/components/steps-guide/", - "status": "开发中" - }, - { - "text": "Tabs 选项卡", - "link": "/components/tabs/" - } - ] - }, - { - "text": "反馈", - "children": [ - { - "text": "Alert 警告", - "link": "/components/alert/" - }, - { - "text": "Loading 加载提示", - "link": "/components/loading/", - "status": "已完成" - }, - { - "text": "Popover 悬浮提示", - "link": "/components/popover/", - "status": "开发中" - }, - { - "text": "Progress 进度条", - "link": "/components/progress/" - }, - { - "text": "Toast 全局提示", - "link": "/components/toast/" - }, - { - "text": "Tooltip提示", - "link": "/components/tooltip/" - } - ] - }, - { - "text": "数据录入", - "children": [ - { - "text": "Checkbox 复选框", - "link": "/components/checkbox/" - }, - { - "text": "DatePicker 日期选择器", - "link": "/components/date-picker/" - }, - { - "text": "EditableSelect 可输入下拉选择框", - "link": "/components/editable-select/" - }, - { - "text": "Input 输入框", - "link": "/components/input/" - }, - { - "text": "Radio 单选框", - "link": "/components/radio/" - }, - { - "text": "Rate 评分", - "link": "/components/rate/" - }, - { - "text": "Select 下拉框", - "link": "/components/select/" - }, - { - "text": "Slider 滑块", - "link": "/components/slider/" - }, - { - "text": "Switch 开关", - "link": "/components/switch/" - }, - { - "text": "TagInput 标签输入框", - "link": "/components/tag-input/" - }, - { - "text": "Transfer 穿梭框", - "link": "/components/transfer/" - }, - { - "text": "Upload 上传", - "link": "/components/upload/" - } - ] - }, - { - "text": "数据展示", - "children": [ - { - "text": "Avatar 头像", - "link": "/components/avatar/" - }, - { - "text": "Badge 徽标", - "link": "/components/badge/" - }, - { - "text": "Card 卡片", - "link": "/components/card/" - }, - { - "text": "Carousel 走马灯", - "link": "/components/carousel/" - }, - { - "text": "ImagePreview 图片预览", - "link": "/components/image-preview/" - }, - { - "text": "QuadrantDiagram 象限图", - "link": "/components/quadrant-diagram/" - }, - { - "text": "Skeleton 骨架屏", - "link": "/components/skeleton/" - }, - { - "text": "Tree 树", - "link": "/components/tree/" - } - ] - }, - { - "text": "布局", - "children": [ - { - "text": "Splitter 分割器", - "link": "/components/splitter/" - } - ] - } - ] -} -- Gitee