From 9ee93ddf81bbb2bf17d18d0246df0480523ab885 Mon Sep 17 00:00:00 2001
From: ping <patter@yeah.net>
Date: Mon, 24 May 2021 09:58:59 +0800
Subject: [PATCH] fix(notification): fix notification component zIndex prop can
 not work (#2021)

fix notification component zIndex prop can not work

fix #2017

Co-authored-by: ping <1456687576@qq.com>
---
 .../__tests__/notification.spec.ts             | 18 +++++++++++++++++-
 packages/notification/src/index.vue            |  1 +
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/notification/__tests__/notification.spec.ts b/packages/notification/__tests__/notification.spec.ts
index ecc2cb8758..766ce4dbe8 100644
--- a/packages/notification/__tests__/notification.spec.ts
+++ b/packages/notification/__tests__/notification.spec.ts
@@ -5,6 +5,7 @@ import { EVENT_CODE } from '@element-plus/utils/aria'
 import Notification from '../src/index.vue'
 import makeMount from '@element-plus/test-utils/make-mount'
 import { rAF } from '@element-plus/test-utils/tick'
+import PopupManager from '@element-plus/utils/popup-manager'
 
 const AXIOM = 'Rem is the best girl'
 
@@ -38,7 +39,7 @@ describe('Notification.vue', () => {
       expect(vm.visible).toBe(true)
       expect(vm.typeClass).toBe('')
       expect(vm.horizontalClass).toBe('right')
-      expect(vm.positionStyle).toEqual({ top: '0px' })
+      expect(vm.positionStyle).toEqual({ top: '0px','z-index': 0 })
     })
 
     test('should be able to render VNode', () => {
@@ -80,6 +81,21 @@ describe('Notification.vue', () => {
 
       expect(HTMLWrapper.find(`.${tagClass}`).exists()).toBe(false)
     })
+
+    test('should be able to render z-index style with zIndex flag', () => {
+      const zIndex = PopupManager.nextZIndex()
+      const wrapper = _mount({
+        props:{
+          zIndex: zIndex,
+        },
+      })
+
+      const vm = wrapper.vm as ComponentPublicInstance<{
+        positionStyle: Record<string, string>
+      }>
+
+      expect(vm.positionStyle).toEqual({ top: '0px','z-index': zIndex })
+    })
   })
 
   describe('lifecycle', () => {
diff --git a/packages/notification/src/index.vue b/packages/notification/src/index.vue
index f3adc22949..e6841daeca 100644
--- a/packages/notification/src/index.vue
+++ b/packages/notification/src/index.vue
@@ -105,6 +105,7 @@ export default defineComponent({
     const positionStyle = computed(() => {
       return {
         [verticalProperty.value]: `${props.offset}px`,
+        'z-index':  props.zIndex,
       }
     })