From 386129f402a2334e5ebcd4df07cbd38e9d90efd4 Mon Sep 17 00:00:00 2001
From: kooriookami <38392315+kooriookami@users.noreply.github.com>
Date: Wed, 14 May 2025 15:02:21 +0800
Subject: [PATCH] feat(components): [config-provider] add message plain config
 (#20723)

* feat(components): [config-provider] add message plain config

* feat: update
---
 docs/en-US/component/config-provider.md                        | 1 +
 docs/examples/config-provider/message.vue                      | 1 +
 .../config-provider/__tests__/config-provider.test.tsx         | 2 ++
 packages/components/message/src/message.ts                     | 1 +
 packages/components/message/src/method.ts                      | 3 +++
 5 files changed, 8 insertions(+)

diff --git a/docs/en-US/component/config-provider.md b/docs/en-US/component/config-provider.md
index a87aefa747..aa69e7b359 100644
--- a/docs/en-US/component/config-provider.md
+++ b/docs/en-US/component/config-provider.md
@@ -95,6 +95,7 @@ In this section, you can learn how to use Config Provider to provide experimenta
 | 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]  | —       |
+| plain ^(2.9.11)    | whether message is plain                                                       | ^[boolean] | —       |
 
 ### Config Provider Slots
 
diff --git a/docs/examples/config-provider/message.vue b/docs/examples/config-provider/message.vue
index 2a5e5e2f44..926eb3e7d5 100644
--- a/docs/examples/config-provider/message.vue
+++ b/docs/examples/config-provider/message.vue
@@ -11,6 +11,7 @@ import { reactive } from 'vue'
 import { ElMessage } from 'element-plus'
 const config = reactive({
   max: 3,
+  plain: true,
 })
 const open = () => {
   ElMessage('This is a message.')
diff --git a/packages/components/config-provider/__tests__/config-provider.test.tsx b/packages/components/config-provider/__tests__/config-provider.test.tsx
index 7a96113a3b..9bd99e55b5 100644
--- a/packages/components/config-provider/__tests__/config-provider.test.tsx
+++ b/packages/components/config-provider/__tests__/config-provider.test.tsx
@@ -184,6 +184,7 @@ describe('config-provider', () => {
         grouping: true,
         showClose: true,
         offset: 200,
+        plain: true,
       })
       const open = () => {
         ElMessage('this is a message.')
@@ -203,6 +204,7 @@ describe('config-provider', () => {
       const elements = document.querySelectorAll('.el-message')
       expect(elements.length).toBe(1)
       expect(document.querySelectorAll('.el-message__closeBtn').length).toBe(1)
+      expect(document.querySelectorAll('.is-plain').length).toBe(1)
 
       const getTopValue = (elm: Element): number =>
         Number.parseFloat(getStyle(elm as HTMLElement, 'top'))
diff --git a/packages/components/message/src/message.ts b/packages/components/message/src/message.ts
index ae115fdb75..4081cdcad1 100644
--- a/packages/components/message/src/message.ts
+++ b/packages/components/message/src/message.ts
@@ -19,6 +19,7 @@ export interface MessageConfigContext {
   duration?: number
   offset?: number
   showClose?: boolean
+  plain?: boolean
 }
 
 export const messageDefaults = mutable({
diff --git a/packages/components/message/src/method.ts b/packages/components/message/src/method.ts
index d5b7cbbb18..d374092493 100644
--- a/packages/components/message/src/method.ts
+++ b/packages/components/message/src/method.ts
@@ -72,6 +72,9 @@ const normalizeOptions = (params?: MessageParams) => {
   if (isBoolean(messageConfig.showClose) && !normalized.showClose) {
     normalized.showClose = messageConfig.showClose
   }
+  if (isBoolean(messageConfig.plain) && !normalized.plain) {
+    normalized.plain = messageConfig.plain
+  }
 
   return normalized as MessageParamsNormalized
 }