diff --git a/docs/en-US/component/config-provider.md b/docs/en-US/component/config-provider.md index fe26d91388..7434590b87 100644 --- a/docs/en-US/component/config-provider.md +++ b/docs/en-US/component/config-provider.md @@ -88,9 +88,13 @@ In this section, you can learn how to use Config Provider to provide experimenta ### Message Attribute -| Attribute | Description | Type | Default | -| --------- | --------------------------------------------------------------------- | --------- | ------- | -| max | the maximum number of messages that can be displayed at the same time | ^[number] | — | +| Attribute | Description | Type | Default | +| ------------------ | ------------------------------------------------------------------------------ | ---------- | ------- | +| max | the maximum number of messages that can be displayed at the same time | ^[number] | — | +| grouping ^(2.8.2) | merge messages with the same content, type of VNode message is not supported | ^[boolean] | — | +| duration ^(2.8.2) | display duration, millisecond. If set to 0, it will not turn off automatically | ^[number] | — | +| showClose ^(2.8.2) | whether to show a close button | ^[boolean] | — | +| offset ^(2.8.2) | set the distance to the top of viewport | ^[number] | — | ### Config Provider Slots diff --git a/packages/components/config-provider/__tests__/config-provider.test.tsx b/packages/components/config-provider/__tests__/config-provider.test.tsx index cdef17f44d..7a96113a3b 100644 --- a/packages/components/config-provider/__tests__/config-provider.test.tsx +++ b/packages/components/config-provider/__tests__/config-provider.test.tsx @@ -6,6 +6,7 @@ import Chinese from '@element-plus/locale/lang/zh-cn' import English from '@element-plus/locale/lang/en' import { ElButton, ElMessage, ElPagination } from '@element-plus/components' import { rAF } from '@element-plus/test-utils/tick' +import { getStyle } from '@element-plus/utils' import { useGlobalComponentSettings, useGlobalConfig, @@ -178,6 +179,36 @@ describe('config-provider', () => { expect(document.querySelectorAll('.el-message').length).toBe(7) }) + it('new config parameters effective', async () => { + const config = reactive({ + grouping: true, + showClose: true, + offset: 200, + }) + const open = () => { + ElMessage('this is a message.') + } + + const wrapper = mount(() => ( + + open + + )) + + await rAF() + + wrapper.find('.el-button').trigger('click') + wrapper.find('.el-button').trigger('click') + await nextTick() + const elements = document.querySelectorAll('.el-message') + expect(elements.length).toBe(1) + expect(document.querySelectorAll('.el-message__closeBtn').length).toBe(1) + + const getTopValue = (elm: Element): number => + Number.parseFloat(getStyle(elm as HTMLElement, 'top')) + expect(getTopValue(elements[0])).toBe(config.offset) + }) + it('multiple config-provider config override', async () => { const config = reactive({ max: 3, diff --git a/packages/components/message/src/message.ts b/packages/components/message/src/message.ts index 3497013f10..aff6c461f3 100644 --- a/packages/components/message/src/message.ts +++ b/packages/components/message/src/message.ts @@ -15,6 +15,10 @@ export type messageType = typeof messageTypes[number] export interface MessageConfigContext { max?: number + grouping?: boolean + duration?: number + offset?: number + showClose?: boolean } export const messageDefaults = mutable({ diff --git a/packages/components/message/src/method.ts b/packages/components/message/src/method.ts index ff4e1fe090..0403f1e802 100644 --- a/packages/components/message/src/method.ts +++ b/packages/components/message/src/method.ts @@ -1,6 +1,7 @@ import { createVNode, render } from 'vue' import { debugWarn, + isBoolean, isClient, isElement, isFunction, @@ -57,6 +58,22 @@ const normalizeOptions = (params?: MessageParams) => { normalized.appendTo = appendTo } + // When grouping is configured globally, + // if grouping is manually set when calling message individually and it is not equal to the default value, + // the global configuration cannot override the current setting. default => false + if (isBoolean(messageConfig.grouping) && !normalized.grouping) { + normalized.grouping = messageConfig.grouping + } + if (isNumber(messageConfig.duration) && normalized.duration === 3000) { + normalized.duration = messageConfig.duration + } + if (isNumber(messageConfig.offset) && normalized.offset === 16) { + normalized.offset = messageConfig.offset + } + if (isBoolean(messageConfig.showClose) && !normalized.showClose) { + normalized.showClose = messageConfig.showClose + } + return normalized as MessageParamsNormalized }