fix(components): [message] fix z-index & offset (#8582)

packages/components/message/src/instance.ts

@@ -1,13 +1,13 @@
 import { shallowReactive } from 'vue'
-import type { VNode } from 'vue'
+import type { ComponentInternalInstance, VNode } from 'vue'
 import type { Mutable } from '@element-plus/utils'
-import type { MessageHandler, MessageInstance, MessageProps } from './message'
+import type { MessageHandler, MessageProps } from './message'
 
 export type MessageContext = {
   id: string
   vnode: VNode
   handler: MessageHandler
-  vm: MessageInstance
+  vm: ComponentInternalInstance
   props: Mutable<MessageProps>
 }
 
@@ -26,5 +26,5 @@ export const getInstance = (id: string) => {
 export const getLastOffset = (id: string): number => {
   const { prev } = getInstance(id)
   if (!prev) return 0
-  return prev.vm.bottom
+  return prev.vm.exposeProxy!.bottom
 }

packages/components/message/src/method.ts

@@ -20,7 +20,6 @@ import type {
   Message,
   MessageFn,
   MessageHandler,
-  MessageInstance,
   MessageOptions,
   MessageParams,
   MessageParamsNormalized,
@@ -82,7 +81,7 @@ const createMessage = (
 
   const props = {
     ...options,
-    zIndex: options.zIndex ?? nextZIndex(),
+    zIndex: nextZIndex() + options.zIndex,
     id,
     onClose: () => {
       userOnClose?.()
@@ -110,14 +109,13 @@ const createMessage = (
   // instances will remove this item when close function gets called. So we do not need to worry about it.
   appendTo.appendChild(container.firstElementChild!)
 
-  const vm = vnode.component!.proxy as MessageInstance
+  const vm = vnode.component!
+
   const handler: MessageHandler = {
     // instead of calling the onClose function directly, setting this value so that we can have the full lifecycle
     // for out component, so that all closing steps will not be skipped.
     close: () => {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore `visible` from defineExpose
-      vm.visible = false
+      vm.exposeProxy!.visible = false
     },
   }