feat(welcome): support vnode getter (#343)

Author: wzc520pyfm

docs/component/welcome.md

@@ -42,12 +42,12 @@ welcome/background
 | 属性 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | classNames | 自定义样式类名，用于各个提示项的不同部分。 | Record<'icon' \| 'title' \| 'description' \| 'extra', string> | - | - |
-| description | 显示在提示列表中的描述。 | VNode \| string | - | - |
-| extra | 显示在提示列表末尾的额外操作。 | VNode | - | - |
-| icon | 显示在提示列表前侧的图标。 | VNode | - | - |
+| description | 显示在提示列表中的描述。 | VNode \| string \| (() => VNode \| string) | - | - |
+| extra | 显示在提示列表末尾的额外操作。 | VNode \| string \| (() => VNode \| string) | - | - |
+| icon | 显示在提示列表前侧的图标。 | VNode \| () => VNode | - | - |
 | rootClassName | 根节点的样式类名。 | string | - | - |
 | styles | 自定义样式，用于各个提示项的不同部分。 | Record<'icon' \| 'title' \| 'description' \| 'extra', CSSProperties> | - | - |
-| title | 显示在提示列表顶部的标题。 | VNode \| string | - | - |
+| title | 显示在提示列表顶部的标题。 | VNode \| string \| (() => VNode \| string) | - | - |
 | variant | 变体类型。 | 'filled' \| 'borderless' | 'filled' | - |
 
 ### Welcome Slots

src/welcome/Welcome.vue

@@ -47,7 +47,12 @@ const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
 // ============================= Icon =============================
 const iconNode = computed(() => {
-  const _icon = slots.icon ? slots.icon() : icon;
+  const _icon = slots.icon
+    ? slots.icon()
+    : typeof icon === 'function'
+      ? icon()
+      : icon;
+
   if (!_icon) {
     return null;
   }
@@ -67,7 +72,12 @@ const iconNode = computed(() => {
 });
 
 const titleNode = computed(() => {
-  const _title = slots.title ? slots.title() : title;
+  const _title = slots.title
+    ? slots.title()
+    : typeof title === 'function'
+      ? title()
+      : title;
+
   if (!_title) {
     return null;
   }
@@ -92,11 +102,16 @@ const descriptionNode = computed(() => {
   if (slots.description) {
     return slots.description();
   }
-  return description;
+  return typeof description === 'function' ? description() : description;
 })
 
 const extraNode = computed(() => {
-  const _extra = slots.extra ? slots.extra() : extra;
+  const _extra = slots.extra
+    ? slots.extra()
+    : typeof extra === 'function'
+      ? extra()
+      : extra;
+
   if (!_extra) {
     return null;
   }

src/welcome/interface.ts

@@ -14,8 +14,8 @@ export interface WelcomeProps {
   styles?: Partial<Record<SemanticType, CSSProperties>>;
 
   // Layout
-  icon?: VNode | string;
-  title?: VNode | string;
-  description?: VNode | string;
-  extra?: VNode;
+  icon?: VNode | string | (() => VNode | string);
+  title?: VNode | string | (() => VNode | string);
+  description?: VNode | string | (() => VNode | string);
+  extra?: VNode | string | (() => VNode | string);
 }