diff --git a/packages/components/message/src/instance.ts b/packages/components/message/src/instance.ts index 30e2f4133b382..833caa6b30436 100644 --- a/packages/components/message/src/instance.ts +++ b/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 } @@ -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 } diff --git a/packages/components/message/src/method.ts b/packages/components/message/src/method.ts index f6972a1d7e367..573e61229b3bb 100644 --- a/packages/components/message/src/method.ts +++ b/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 }, }