From af5724e6c40b9a6425b3163a5980ea0deebf0057 Mon Sep 17 00:00:00 2001 From: zhuchenxi Date: Wed, 29 Sep 2021 18:32:19 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix(overlay):=20=E8=A7=A3=E5=86=B3=E5=85=83?= =?UTF-8?q?=E7=B4=A0=E5=B5=8C=E5=A5=97=E5=B1=82=E7=BA=A7=E8=BF=87=E6=B7=B1?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/overlay/src/common-overlay.tsx | 2 +- devui/overlay/src/fixed-overlay.tsx | 29 +++++++++++----------- devui/overlay/src/flexible-overlay.tsx | 33 ++++++++++---------------- devui/overlay/src/overlay-types.ts | 7 ++++-- devui/overlay/src/overlay.scss | 19 +++++---------- devui/overlay/src/utils.ts | 31 +++++++++++------------- 6 files changed, 52 insertions(+), 69 deletions(-) diff --git a/devui/overlay/src/common-overlay.tsx b/devui/overlay/src/common-overlay.tsx index 783f1692..51a9e5df 100644 --- a/devui/overlay/src/common-overlay.tsx +++ b/devui/overlay/src/common-overlay.tsx @@ -5,7 +5,7 @@ export const CommonOverlay = defineComponent({ setup(props, ctx) { return () => ( - + {renderSlot(ctx.slots, 'default')} diff --git a/devui/overlay/src/fixed-overlay.tsx b/devui/overlay/src/fixed-overlay.tsx index ea6aaadb..4a84b1c4 100644 --- a/devui/overlay/src/fixed-overlay.tsx +++ b/devui/overlay/src/fixed-overlay.tsx @@ -14,28 +14,27 @@ export const FixedOverlay = defineComponent({ }, }, setup(props, ctx) { - const { containerClass, panelClass, handleBackdropClick } = - useOverlayLogic(props); - - const overlayRef = ref(null); - const handleBubbleCancel = (event: Event) => (event.cancelBubble = true); + const { + backgroundClass, + overlayClass, + handleBackdropClick, + handleOverlayBubbleCancel + } = useOverlayLogic(props); return () => (
-
-
- {renderSlot(ctx.slots, 'default')} -
+
+ {renderSlot(ctx.slots, 'default')}
diff --git a/devui/overlay/src/flexible-overlay.tsx b/devui/overlay/src/flexible-overlay.tsx index cc1a5cdc..19c55c4f 100644 --- a/devui/overlay/src/flexible-overlay.tsx +++ b/devui/overlay/src/flexible-overlay.tsx @@ -109,32 +109,23 @@ export const FlexibleOverlay = defineComponent({ } }, instance); - const { containerClass, panelClass, handleBackdropClick } = - useOverlayLogic(props); + const { + backgroundClass, + overlayClass, + handleBackdropClick, + handleOverlayBubbleCancel + } = useOverlayLogic(props); return () => ( -
+
-
(event.cancelBubble = true)} - > - {renderSlot(ctx.slots, 'default')} -
+ {renderSlot(ctx.slots, 'default')}
diff --git a/devui/overlay/src/overlay-types.ts b/devui/overlay/src/overlay-types.ts index 80b20826..95b00499 100644 --- a/devui/overlay/src/overlay-types.ts +++ b/devui/overlay/src/overlay-types.ts @@ -1,4 +1,4 @@ -import { ExtractPropTypes, PropType } from 'vue'; +import { ExtractPropTypes, PropType, CSSProperties } from 'vue'; export const overlayProps = { visible: { @@ -15,9 +15,12 @@ export const overlayProps = { type: String, default: '' }, + backgroundStyle: { + type: [String, Object] as PropType + }, hasBackdrop: { type: Boolean, - default: true + default: false }, backdropClick: { type: Function, diff --git a/devui/overlay/src/overlay.scss b/devui/overlay/src/overlay.scss index 9dac185c..66c0f4a8 100644 --- a/devui/overlay/src/overlay.scss +++ b/devui/overlay/src/overlay.scss @@ -1,30 +1,23 @@ -.d-overlay-container { +.devui-overlay-background { position: fixed; top: 0; left: 0; - height: 100%; - width: 100%; + height: 100vh; + width: 100vw; display: flex; - &__disabled { - pointer-events: none; - } - - &__background { + &__color { background: rgba(0, 0, 0, 0.4); } - .d-overlay-panel { + .devui-overlay { position: relative; z-index: 1000; - } - - .d-overlay { pointer-events: auto; } } -.d-overlay-fade { +.devui-overlay-fade { @mixin d-overlay-fade-animation { animation-name: d-overlay-fade; animation-duration: 0.3s; diff --git a/devui/overlay/src/utils.ts b/devui/overlay/src/utils.ts index 40d7b947..c5120060 100644 --- a/devui/overlay/src/utils.ts +++ b/devui/overlay/src/utils.ts @@ -2,25 +2,18 @@ import { onUnmounted, watch, computed, ComputedRef } from 'vue'; import { OverlayProps } from './overlay-types'; interface CommonInfo { - containerClass: ComputedRef - panelClass: ComputedRef + backgroundClass: ComputedRef + overlayClass: ComputedRef handleBackdropClick: (e: Event) => void + handleOverlayBubbleCancel: (e: Event) => void } export function useOverlayLogic(props: OverlayProps): CommonInfo { - const containerClass = computed(() => { - if (props.hasBackdrop) { - return ['d-overlay-container', props.backgroundClass]; - } else { - return ['d-overlay-container', 'd-overlay-container__disabled']; - } + const backgroundClass = computed(() => { + return ['devui-overlay-background', 'devui-overlay-background__color', props.backgroundClass]; }); - const panelClass = computed(() => { - if (props.hasBackdrop) { - return ['d-overlay-panel']; - } else { - return ['d-overlay-panel', 'd-overlay-container__disabled']; - } + const overlayClass = computed(() => { + return 'devui-overlay'; }); const handleBackdropClick = (event: Event) => { @@ -32,6 +25,9 @@ export function useOverlayLogic(props: OverlayProps): CommonInfo { } }; + const handleOverlayBubbleCancel = (event: Event) => (event.cancelBubble = true); + + const body = document.body; const originOverflow = body.style.overflow; watch([() => props.visible, () => props.backgroundBlock], ([visible, backgroundBlock]) => { @@ -45,8 +41,9 @@ export function useOverlayLogic(props: OverlayProps): CommonInfo { }); return { - containerClass, - panelClass, - handleBackdropClick + backgroundClass, + overlayClass, + handleBackdropClick, + handleOverlayBubbleCancel } } -- Gitee From 783e7aea57680ef2743cb2276346fd0ee1c3eb69 Mon Sep 17 00:00:00 2001 From: zhuchenxi Date: Thu, 30 Sep 2021 09:28:34 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fix(overlay):=20=E7=A7=BB=E9=99=A4=20hasBac?= =?UTF-8?q?kdrop=20API?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/overlay/src/overlay-types.ts | 4 ---- sites/components/overlay/index.md | 2 -- 2 files changed, 6 deletions(-) diff --git a/devui/overlay/src/overlay-types.ts b/devui/overlay/src/overlay-types.ts index 95b00499..766963dc 100644 --- a/devui/overlay/src/overlay-types.ts +++ b/devui/overlay/src/overlay-types.ts @@ -18,10 +18,6 @@ export const overlayProps = { backgroundStyle: { type: [String, Object] as PropType }, - hasBackdrop: { - type: Boolean, - default: false - }, backdropClick: { type: Function, }, diff --git a/sites/components/overlay/index.md b/sites/components/overlay/index.md index 31ab9274..264cfbc5 100644 --- a/sites/components/overlay/index.md +++ b/sites/components/overlay/index.md @@ -178,7 +178,6 @@ d-fixed-overlay 参数 | onUpdate:visible | `(value: boolean) => void` | -- | 可选，遮罩层取消可见事件 | | backgroundBlock | `boolean` | false | 可选，如果为 true，背景不能滚动 | | backgroundClass | `string` | -- | 可选，背景的样式类 | -| hasBackdrop | `boolean` | true | 可选，如果为false，背景后下的内容将可以触发 | | backdropClick | `() => void` | -- | 可选，点击背景触发的事件 | | backdropClose | `boolean` | false | 可选，如果为true，点击背景将触发 `onUpdate:visible`，默认参数是 false | | overlayStyle | `CSSProperties` | -- | 可选，遮罩层的样式 | @@ -191,7 +190,6 @@ d-flexible-overlay 参数 | onUpdate:visible | `(value: boolean) => void` | -- | 可选，遮罩层取消可见事件 | | backgroundBlock | `boolean` | false | 可选，如果为 true，背景不能滚动 | | backgroundClass | `string` | -- | 可选，背景的样式类 | -| hasBackdrop | `boolean` | true | 可选，如果为false，背景后下的内容将可以触发 | | backdropClick | `() => void` | -- | 可选，点击背景触发的事件 | | backdropClose | `boolean` | false | 可选，如果为true，点击背景将触发 `onUpdate:visible`，参数是 false | | origin | `Element \| ComponentPublicInstance \| { x: number, y: number, width?: number, height?: number }` | false | 必选，你必须指定起点元素才能让遮罩层与该元素连接在一起 | -- Gitee From 4c547ea23d8f98b36e6bfde42febb744d247a3ea Mon Sep 17 00:00:00 2001 From: zhuchenxi Date: Thu, 30 Sep 2021 18:01:53 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix(overlay):=20=E4=BF=AE=E5=A4=8D=E9=9A=90?= =?UTF-8?q?=E8=97=8Foverlay=E6=97=B6=E4=BA=A7=E7=94=9F=E7=9A=84=E6=8A=96?= =?UTF-8?q?=E5=8A=A8=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/overlay/src/utils.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/devui/overlay/src/utils.ts b/devui/overlay/src/utils.ts index c5120060..7e8c34d7 100644 --- a/devui/overlay/src/utils.ts +++ b/devui/overlay/src/utils.ts @@ -30,9 +30,20 @@ export function useOverlayLogic(props: OverlayProps): CommonInfo { const body = document.body; const originOverflow = body.style.overflow; + const originPosition = body.style.position; watch([() => props.visible, () => props.backgroundBlock], ([visible, backgroundBlock]) => { if (backgroundBlock) { - body.style.overflow = visible ? 'hidden' : originOverflow; + const top = body.getBoundingClientRect().y; + if (visible) { + body.style.overflowY = 'scroll'; + body.style.position = visible ? 'fixed' : ''; + body.style.top = `${top}px`; + } else { + body.style.overflowY = originOverflow; + body.style.position = originPosition; + body.style.top = ''; + window.scrollTo(0, -top); + } } }); -- Gitee