feat(components): [notification] add support for message as a Function (#18558)

* feat(components): [Notification] add support for message as a Function

* feat: add example of Notification with VNode

* Update docs/en-US/component/notification.md

Co-authored-by: btea <2356281422@qq.com>

* feat: update version

---------

Co-authored-by: btea <2356281422@qq.com>

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
-  "cSpell.words": ["Element Plus", "element-plus"],
+  "cSpell.words": ["Element Plus", "element-plus", "vnode"],
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {

docs/en-US/component/notification.md

@@ -61,6 +61,18 @@ Although `message` property supports HTML strings, dynamically rendering arbitra
 
 :::
 
+## Message using functions ^(2.9.0)
+
+`message` can be VNode.
+
+After ^(2.9.0), `message` supports a function whose return value is a VNode.
+
+:::demo
+
+notification/use-vnode
+
+:::
+
 ## Hide close button
 
 It is possible to hide the close button
@@ -111,7 +123,7 @@ ElNotification({}, appContext)
 | Name                     | Description                                                                                                        | Type                                                                  | Default   |
 | ------------------------ | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------- | --------- |
 | title                    | title                                                                                                              | ^[string]                                                             | ''        |
-| message                  | description text                                                                                                   | ^[string] / ^[VNode]                                                  | ''        |
+| message                  | description text                                                                                                   | ^[string] / ^[VNode] / ^[Function]`() => VNode`                       | ''        |
 | dangerouslyUseHTMLString | whether `message` is treated as HTML string                                                                        | ^[boolean]                                                            | false     |
 | type                     | notification type                                                                                                  | ^[enum]`'success' \| 'warning' \| 'info' \| 'error' \| ''`            | ''        |
 | icon                     | custom icon component. It will be overridden by `type`                                                             | ^[string] / ^[Component]                                              | —         |

docs/examples/notification/use-vnode.vue

@@ -0,0 +1,34 @@
+<template>
+  <el-button plain @click="open">Common VNode</el-button>
+  <el-button plain @click="open1">Dynamic props</el-button>
+</template>
+
+<script lang="ts" setup>
+import { h, ref } from 'vue'
+import { ElNotification, ElSwitch } from 'element-plus'
+
+const open = () => {
+  ElNotification({
+    title: 'Use Vnode',
+    message: h('p', null, [
+      h('span', null, 'Message can be '),
+      h('i', { style: 'color: teal' }, 'VNode'),
+    ]),
+  })
+}
+
+const open1 = () => {
+  const checked = ref<boolean | string | number>(false)
+  ElNotification({
+    title: 'Use Vnode',
+    // Should pass a function if VNode contains dynamic props
+    message: () =>
+      h(ElSwitch, {
+        modelValue: checked.value,
+        'onUpdate:modelValue': (val: boolean | string | number) => {
+          checked.value = val
+        },
+      }),
+  })
+}
+</script>

packages/components/notification/src/notification.ts

@@ -46,7 +46,11 @@ export const notificationProps = buildProps({
    * @description description text
    */
   message: {
-    type: definePropType<string | VNode>([String, Object]),
+    type: definePropType<string | VNode | (() => VNode)>([
+      String,
+      Object,
+      Function,
+    ]),
     default: '',
   },
   /**

packages/components/notification/src/notify.ts

@@ -3,6 +3,7 @@ import {
   debugWarn,
   isClient,
   isElement,
+  isFunction,
   isString,
   isVNode,
 } from '@element-plus/utils'
@@ -81,11 +82,7 @@ const notify: NotifyFn & Partial<Notify> & { _context: AppContext | null } =
     const vm = createVNode(
       NotificationConstructor,
       props,
-      isVNode(props.message)
-        ? {
-            default: () => props.message,
-          }
-        : null
+      isFunction(props.message) ? props.message : () => props.message
     )
     vm.appContext = context ?? notify._context