From b724f7f87a50fb99976b8293774ccb1e85f7dc45 Mon Sep 17 00:00:00 2001
From: DDDDD12138 <43703884+DDDDD12138@users.noreply.github.com>
Date: Tue, 19 Nov 2024 15:15:28 +0800
Subject: [PATCH] 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                         |  2 +-
 docs/en-US/component/notification.md          | 14 +++++++-
 docs/examples/notification/use-vnode.vue      | 34 +++++++++++++++++++
 .../notification/src/notification.ts          |  6 +++-
 .../components/notification/src/notify.ts     |  7 ++--
 5 files changed, 55 insertions(+), 8 deletions(-)
 create mode 100644 docs/examples/notification/use-vnode.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
index d1f625aefd..f198f4a36c 100644
--- a/.vscode/settings.json
+++ b/.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": {
diff --git a/docs/en-US/component/notification.md b/docs/en-US/component/notification.md
index 0cf8abb4c1..a65987770f 100644
--- a/docs/en-US/component/notification.md
+++ b/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]                                              | —         |
diff --git a/docs/examples/notification/use-vnode.vue b/docs/examples/notification/use-vnode.vue
new file mode 100644
index 0000000000..b742447341
--- /dev/null
+++ b/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>
diff --git a/packages/components/notification/src/notification.ts b/packages/components/notification/src/notification.ts
index 9e0cac798d..1406d97d54 100644
--- a/packages/components/notification/src/notification.ts
+++ b/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: '',
   },
   /**
diff --git a/packages/components/notification/src/notify.ts b/packages/components/notification/src/notify.ts
index 1e7e4210e7..c40aa02af1 100644
--- a/packages/components/notification/src/notify.ts
+++ b/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