From a841a9727a2dcc99ae4fcb0bd00776933ccbcdd3 Mon Sep 17 00:00:00 2001
From: kooriookami <38392315+kooriookami@users.noreply.github.com>
Date: Wed, 27 Jan 2021 09:19:10 -0600
Subject: [PATCH] fix(popover): fix z-index won't update when popover is shown
 (#1364)

* fix(popover): fix z-index won't update when popover is shown

* fix: update

* fix: remove onmounted

* fix: update
---
 packages/popover/src/usePopover.ts      | 32 +++++++++++++------------
 packages/popper/src/use-popper/index.ts |  4 ++--
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/popover/src/usePopover.ts b/packages/popover/src/usePopover.ts
index 027ce2067e..0ec53e124e 100644
--- a/packages/popover/src/usePopover.ts
+++ b/packages/popover/src/usePopover.ts
@@ -1,12 +1,12 @@
-import { computed, watch } from 'vue'
+import type { SetupContext } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { isString } from '@element-plus/utils/util'
+import type { IPopperOptions } from '@element-plus/popper'
 import { usePopper } from '@element-plus/popper'
 import PopupManager from '@element-plus/utils/popup-manager'
+import { EmitType } from '@element-plus/popper/src/use-popper'
 
-import type { IPopperOptions } from '@element-plus/popper'
-import type { SetupContext } from 'vue'
-
-export interface IUsePopover extends IPopperOptions{
+export interface IUsePopover extends IPopperOptions {
   width: number | string
 }
 
@@ -14,25 +14,27 @@ export const SHOW_EVENT = 'show'
 export const HIDE_EVENT = 'hide'
 
 export default function usePopover(props: IUsePopover, ctx: SetupContext<string[]>) {
-  const popperStyle = computed(() => {
-
-    let _width: string
-
+  const zIndex = ref(PopupManager.nextZIndex())
+  const width = computed(() => {
     if (isString(props.width)) {
-      _width = props.width as string
-    } else {
-      _width = props.width + 'px'
+      return props.width as string
     }
+    return props.width + 'px'
+  })
 
+  const popperStyle = computed(() => {
     return {
-      width: _width,
-      zIndex: PopupManager.nextZIndex(),
+      width: width.value,
+      zIndex: zIndex.value,
     }
   })
 
-  const popperProps = usePopper(props, ctx)
+  const popperProps = usePopper(props, ctx as SetupContext<EmitType[]>)
 
   watch(popperProps.visibility, val => {
+    if (val) {
+      zIndex.value = PopupManager.nextZIndex()
+    }
     ctx.emit(val ? SHOW_EVENT : HIDE_EVENT)
   })
 
diff --git a/packages/popper/src/use-popper/index.ts b/packages/popper/src/use-popper/index.ts
index 081dfdca77..cc1d8a224c 100644
--- a/packages/popper/src/use-popper/index.ts
+++ b/packages/popper/src/use-popper/index.ts
@@ -21,8 +21,8 @@ import type {
   RefElement,
 } from './defaults'
 
-type ElementType = ComponentPublicInstance | HTMLElement
-type EmitType = 'update:visible' | 'after-enter' | 'after-leave' | 'before-enter' | 'before-leave'
+export type ElementType = ComponentPublicInstance | HTMLElement
+export type EmitType = 'update:visible' | 'after-enter' | 'after-leave' | 'before-enter' | 'before-leave'
 
 export const DEFAULT_TRIGGER = ['hover']
 export const UPDATE_VISIBLE_EVENT = 'update:visible'