fix(components): [message] fix space when offset exists (#11268)

* fix(components): [message] fix space when offset exists

packages/components/message/__tests__/message-manager.test.tsx

@@ -104,6 +104,27 @@ describe('Message on command', () => {
     messages.forEach((m) => m.close())
   })
 
+  test('correct space when set offset', async () => {
+    const offset = 100
+    const space = 20
+    const messages = [Message({ offset }), Message({ offset })]
+
+    await rAF()
+    const elements = document.querySelectorAll(selector)
+    expect(elements.length).toBe(2)
+
+    const getTopValue = (elm: Element): number =>
+      Number.parseFloat(getStyle(elm as HTMLElement, 'top'))
+
+    const firstElementTop = getTopValue(elements[0])
+    const secondElementTop = getTopValue(elements[1])
+
+    expect(firstElementTop).toBe(offset)
+    expect(secondElementTop).toBe(offset + space)
+
+    messages.forEach((m) => m.close())
+  })
+
   test('it should have 4 other types of message', () => {
     expect(Message.success).toBeInstanceOf(Function)
     expect(Message.warning).toBeInstanceOf(Function)

packages/components/message/src/instance.ts

@@ -28,3 +28,8 @@ export const getLastOffset = (id: string): number => {
   if (!prev) return 0
   return prev.vm.exposed!.bottom.value
 }
+
+export const getOffsetOrSpace = (id: string, offset: number) => {
+  const idx = instances.findIndex((instance) => instance.id === id)
+  return idx > 0 ? 20 : offset
+}

packages/components/message/src/message.vue

@@ -52,7 +52,7 @@ import ElBadge from '@element-plus/components/badge'
 import { ElIcon } from '@element-plus/components/icon'
 import { useNamespace } from '@element-plus/hooks'
 import { messageEmits, messageProps } from './message'
-import { getLastOffset } from './instance'
+import { getLastOffset, getOffsetOrSpace } from './instance'
 import type { BadgeProps } from '@element-plus/components/badge'
 import type { CSSProperties } from 'vue'
 
@@ -85,7 +85,9 @@ const iconComponent = computed(
 )
 
 const lastOffset = computed(() => getLastOffset(props.id))
-const offset = computed(() => props.offset + lastOffset.value)
+const offset = computed(
+  () => getOffsetOrSpace(props.id, props.offset) + lastOffset.value
+)
 const bottom = computed((): number => height.value + offset.value)
 const customStyle = computed<CSSProperties>(() => ({
   top: `${offset.value}px`,