From 93a06a45f58c0920e8f43c49c9859ce4ca10c94e Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Sun, 6 Mar 2022 21:32:19 +0800
Subject: [PATCH] feat: spin tip support slot

---
 components/spin/Spin.tsx                      |  9 +++++++--
 components/spin/index.en-US.md                | 16 ++++++++--------
 components/spin/index.zh-CN.md                | 16 ++++++++--------
 components/spin/style/index.less              |  3 +++
 components/spin/style/{index.ts => index.tsx} |  0
 5 files changed, 26 insertions(+), 18 deletions(-)
 rename components/spin/style/{index.ts => index.tsx} (100%)

diff --git a/components/spin/Spin.tsx b/components/spin/Spin.tsx
index ca81d9d80..33661ad87 100644
--- a/components/spin/Spin.tsx
+++ b/components/spin/Spin.tsx
@@ -15,7 +15,7 @@ export const spinProps = () => ({
   spinning: PropTypes.looseBool,
   size: SpinSize,
   wrapperClassName: PropTypes.string,
-  tip: PropTypes.string,
+  tip: PropTypes.any,
   delay: PropTypes.number,
   indicator: PropTypes.any,
 });
@@ -121,7 +121,12 @@ export default defineComponent({
     },
   },
   render() {
-    const { size, prefixCls: customizePrefixCls, tip, wrapperClassName } = this.$props;
+    const {
+      size,
+      prefixCls: customizePrefixCls,
+      tip = this.$slots.tip?.(),
+      wrapperClassName,
+    } = this.$props;
     const { class: cls, style, ...divProps } = this.$attrs;
     const { getPrefixCls, direction } = this.configProvider;
     const prefixCls = getPrefixCls('spin', customizePrefixCls);
diff --git a/components/spin/index.en-US.md b/components/spin/index.en-US.md
index d26bb2931..2e3a66dfd 100644
--- a/components/spin/index.en-US.md
+++ b/components/spin/index.en-US.md
@@ -13,14 +13,14 @@ When part of the page is waiting for asynchronous data or during a rendering pro
 
 ## API
 
-| Property | Description | Type | Default Value |
-| --- | --- | --- | --- |
-| delay | specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - |
-| indicator | vue node of the spinning indicator | vNode \|slot | - |
-| size | size of Spin, options: `small`, `default` and `large` | string | `default` |
-| spinning | whether Spin is spinning | boolean | true |
-| tip | customize description content when Spin has children | string | - |
-| wrapperClassName | className of wrapper when Spin has children | string | - |
+| Property | Description | Type | Default Value | Version |
+| --- | --- | --- | --- | --- |
+| delay | specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - |  |
+| indicator | vue node of the spinning indicator | vNode \|slot | - |  |
+| size | size of Spin, options: `small`, `default` and `large` | string | `default` |  |
+| spinning | whether Spin is spinning | boolean | true |  |
+| tip | customize description content when Spin has children | string \| slot | - | slot 3.0 |
+| wrapperClassName | className of wrapper when Spin has children | string | - |  |
 
 ### Static Method
 
diff --git a/components/spin/index.zh-CN.md b/components/spin/index.zh-CN.md
index 7f8bdbb01..52267f347 100644
--- a/components/spin/index.zh-CN.md
+++ b/components/spin/index.zh-CN.md
@@ -14,14 +14,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
 
 ## API
 
-| 参数             | 说明                                         | 类型          | 默认值    |
-| ---------------- | -------------------------------------------- | ------------- | --------- |
-| delay            | 延迟显示加载效果的时间（防止闪烁）           | number (毫秒) | -         |
-| indicator        | 加载指示符                                   | vNode \| slot | -         |
-| size             | 组件大小，可选值为 `small` `default` `large` | string        | `default` |
-| spinning         | 是否为加载中状态                             | boolean       | true      |
-| tip              | 当作为包裹元素时，可以自定义描述文案         | string        | -         |
-| wrapperClassName | 包装器的类属性                               | string        | -         |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| delay | 延迟显示加载效果的时间（防止闪烁） | number (毫秒) | - |  |
+| indicator | 加载指示符 | vNode \| slot | - |  |
+| size | 组件大小，可选值为 `small` `default` `large` | string | `default` |  |
+| spinning | 是否为加载中状态 | boolean | true |  |
+| tip | 当作为包裹元素时，可以自定义描述文案 | string \| slot | - | slot 3.0 |
+| wrapperClassName | 包装器的类属性 | string | - |  |
 
 ### 静态方法
 
diff --git a/components/spin/style/index.less b/components/spin/style/index.less
index 1bdd9970a..04690cc68 100644
--- a/components/spin/style/index.less
+++ b/components/spin/style/index.less
@@ -141,16 +141,19 @@
         top: 0;
         left: 0;
       }
+
       &:nth-child(2) {
         top: 0;
         right: 0;
         animation-delay: 0.4s;
       }
+
       &:nth-child(3) {
         right: 0;
         bottom: 0;
         animation-delay: 0.8s;
       }
+
       &:nth-child(4) {
         bottom: 0;
         left: 0;
diff --git a/components/spin/style/index.ts b/components/spin/style/index.tsx
similarity index 100%
rename from components/spin/style/index.ts
rename to components/spin/style/index.tsx