From 8aaf0d989acbbd1952b3b5c952d1c12fcee8a62f Mon Sep 17 00:00:00 2001 From: jeremywu <591449570@qq.com> Date: Fri, 20 Nov 2020 10:04:20 +0800 Subject: [PATCH] fix(popper): making popper z-index dynamical (#632) --- packages/popover/__tests__/popover.spec.ts | 11 +++++++ packages/popover/src/index.vue | 1 + packages/popover/src/usePopover.ts | 3 +- packages/popper/__tests__/popper.spec.ts | 12 ++++++- packages/popper/src/index.vue | 2 ++ packages/popper/src/use-popper/index.ts | 37 ++++++++++++++-------- 6 files changed, 50 insertions(+), 16 deletions(-) diff --git a/packages/popover/__tests__/popover.spec.ts b/packages/popover/__tests__/popover.spec.ts index a5f6ab59df..3284ce1a8d 100644 --- a/packages/popover/__tests__/popover.spec.ts +++ b/packages/popover/__tests__/popover.spec.ts @@ -1,5 +1,6 @@ import makeMount from '../../test-utils/make-mount' import Popover from '../src/index.vue' +import PopupManager from '@element-plus/utils/popup-manager' const AXIOM = 'Rem is the best girl' @@ -63,4 +64,14 @@ describe('Popover.vue', () => { expect(wrapper.text()).toBe(content) }) + + test('popper z-index should be dynamical', () => { + const wrapper = mount() + + expect( + Number.parseInt( + window.getComputedStyle(wrapper.find('.el-popper').element).zIndex, + ), + ).toBeLessThanOrEqual(PopupManager.zIndex) + }) }) diff --git a/packages/popover/src/index.vue b/packages/popover/src/index.vue index dc23d40749..26b888b18a 100644 --- a/packages/popover/src/index.vue +++ b/packages/popover/src/index.vue @@ -90,6 +90,7 @@ export default defineComponent({ popperStyle: popperStyle, popperId, visibility, + isManual: this.isManualMode(), onMouseEnter: onPopperMouseEnter, onMouseLeave: onPopperMouseLeave, onAfterEnter, diff --git a/packages/popover/src/usePopover.ts b/packages/popover/src/usePopover.ts index a677e95673..84b696599d 100644 --- a/packages/popover/src/usePopover.ts +++ b/packages/popover/src/usePopover.ts @@ -1,7 +1,7 @@ import { computed, watch } from 'vue' import { isString } from '@element-plus/utils/util' import { usePopper } from '@element-plus/popper' - +import PopupManager from '@element-plus/utils/popup-manager' import type { IPopperOptions } from '@element-plus/popper' import type { SetupContext } from 'vue' @@ -26,6 +26,7 @@ export default function usePopover(props: IUsePopover, ctx: SetupContext @@ -103,6 +104,16 @@ describe('Popper.vue', () => { expect(wrapper.find(selector).exists()).toBe(false) }) + test('popper z-index should be dynamical', () => { + const wrapper = _mount() + + expect( + Number.parseInt( + window.getComputedStyle(wrapper.find('.el-popper').element).zIndex, + ), + ).toBeLessThanOrEqual(PopupManager.zIndex) + }) + test('should show popper when mouse entered and hide when popper left', async () => { const wrapper = _mount({ appendToBody: false, @@ -166,7 +177,6 @@ describe('Popper.vue', () => { expect(onMouseUp).toHaveBeenCalledTimes(1) document.removeEventListener('mouseup', onMouseUp) document.removeEventListener('mousedown', onMouseDown) - }) test('should disable popper to popup', async () => { diff --git a/packages/popper/src/index.vue b/packages/popper/src/index.vue index 4a6a055e1c..ba95d84773 100644 --- a/packages/popper/src/index.vue +++ b/packages/popper/src/index.vue @@ -63,6 +63,7 @@ export default defineComponent({ onAfterLeave, popperClass, popperId, + popperStyle, pure, showArrow, transition, @@ -77,6 +78,7 @@ export default defineComponent({ name: transition, popperClass, popperId, + popperStyle, pure, isManual, onMouseEnter: onPopperMouseEnter, diff --git a/packages/popper/src/use-popper/index.ts b/packages/popper/src/use-popper/index.ts index b5073a327c..075ce5f3e0 100644 --- a/packages/popper/src/use-popper/index.ts +++ b/packages/popper/src/use-popper/index.ts @@ -1,9 +1,4 @@ -import { - computed, - ref, - reactive, - watch, -} from 'vue' +import { computed, ref, reactive, watch } from 'vue' import { createPopper } from '@popperjs/core' import { @@ -14,17 +9,26 @@ import { isString, $, } from '@element-plus/utils/util' +import PopupManager from '@element-plus/utils/popup-manager' import usePopperOptions from './popper-options' import type { ComponentPublicInstance, SetupContext, Ref } from 'vue' -import type { IPopperOptions, TriggerType, PopperInstance, RefElement } from './defaults' +import type { + IPopperOptions, + TriggerType, + PopperInstance, + RefElement, +} from './defaults' type ElementType = ComponentPublicInstance | HTMLElement export const DEFAULT_TRIGGER = ['hover'] export const UPDATE_VISIBLE_EVENT = 'update:visible' -export default function (props: IPopperOptions, { emit }: SetupContext) { +export default function( + props: IPopperOptions, + { emit }: SetupContext, +) { const arrowRef = ref(null) const triggerRef = ref(null) as Ref const popperRef = ref(null) @@ -37,6 +41,12 @@ export default function (props: IPopperOptions, { emit }: SetupContext const isManualMode = () => props.manualMode || props.trigger === 'manual' + const popperStyle = computed(() => { + return { + zIndex: String(PopupManager.nextZIndex()), + } + }) + const popperOptions = usePopperOptions(props, { arrow: arrowRef, }) @@ -56,7 +66,9 @@ export default function (props: IPopperOptions, { emit }: SetupContext }, set(val) { if (isManualMode()) return - isBool(props.visible) ? emit(UPDATE_VISIBLE_EVENT, val) : state.visible = val + isBool(props.visible) + ? emit(UPDATE_VISIBLE_EVENT, val) + : (state.visible = val) }, }) @@ -140,11 +152,7 @@ export default function (props: IPopperOptions, { emit }: SetupContext const _trigger = isHTMLElement(unwrappedTrigger) ? unwrappedTrigger : (unwrappedTrigger as ComponentPublicInstance).$el - popperInstance = createPopper( - _trigger, - $(popperRef), - $(popperOptions), - ) + popperInstance = createPopper(_trigger, $(popperRef), $(popperOptions)) popperInstance.update() } @@ -284,6 +292,7 @@ export default function (props: IPopperOptions, { emit }: SetupContext popperId, popperInstance, popperRef, + popperStyle, triggerRef, visibility, }