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

@@ -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
 

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.')

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'))

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({

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
 }