doc: fix qiankun autoSetLoading introduction (umijs#5455)

Mavinbin · Sep 22, 2020 · 0d80486 · 0d80486
1 parent cdb2f14
commit 0d80486
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 28 deletions.
diff --git a/docs/plugins/plugin-qiankun.md b/docs/plugins/plugin-qiankun.md
@@ -186,9 +186,7 @@ export function MyPage() {
 
 ##### loading 动画与组件样式
 
-默认情况下，当我们检测到你使用的是 antd 组件库时，我们会在子应用加载期间自动增加一个 antd 的 loading 动画。
-
-如果你需要定制自己的 loading 动画，或者修改组件的样式，你可以这样处理：
+你可以通过配置 `autoSetLoading` 的方式，开启微应用的 loading 动画。
 
 ```jsx
 import { MicroApp } from 'umi';
@@ -198,32 +196,51 @@ export function MyPage() {
   return (
     <div>
       <div>
-         <MicroApp 
-           name="app1"
-           // 自定义 loading 动画
-           loader={loading => <div>loading: {loading}</div>}
-           // 微应用容器 class
-           className="myContainer"
-           // wrapper class，仅开启 loading 动画时生效
-           wrapperClassName="myWrapper"
-         />
+         <MicroApp name="app1" autoSetLoading />
       </div>
     </div>
   )
 }
 ```
 
-路由模式下，你可以这样设置一些静态配置：
+默认情况下，当我们检测到你使用的是 antd 组件库时，loading 动画使用的是 antd Spin 组件。
+
+如果你需要定制自己的 loading 动画，或者修改组件的样式，你可以这样处理：
+
+```jsx
+import { MicroApp } from 'umi';
+
+export function MyPage() {
+
+  return (
+    <div>
+      <MicroApp
+        name="app1"
+        autoSetLoading
+        // 设置自定义 loading 动画
+        loader={loading => <div>loading: {loading}</div>}
+        // 微应用容器 class
+        className="myContainer"
+        // wrapper class，仅开启 loading 动画时生效
+        wrapperClassName="myWrapper"
+      />
+    </div>
+  )
+}
+```
+
+路由模式下，你可以这样设置一些静态配置开启 loading 动画：
 
 ```js
 {
   path: '/user',
   microApp: 'user',
   microAppProps: {
+    autoSetLoading: true,
     className: 'myContainer',
     wrapperClassName: 'myWrapper',
   }
-},
+}
 ```
 
 或者，你可以通过设置 autoSetLoading false 来关闭自动的 loading 动画：

diff --git a/docs/plugins/plugin-qiankun.zh-CN.md b/docs/plugins/plugin-qiankun.zh-CN.md
@@ -182,9 +182,7 @@ export function MyPage() {
 
 ##### loading 动画与组件样式
 
-默认情况下，当我们检测到你使用的是 antd 组件库时，我们会在子应用加载期间自动增加一个 antd 的 loading 动画。
-
-如果你需要定制自己的 loading 动画，或者修改组件的样式，你可以这样处理：
+你可以通过配置 `autoSetLoading` 的方式，开启微应用的 loading 动画。
 
 ```jsx
 import { MicroApp } from 'umi';
@@ -194,32 +192,51 @@ export function MyPage() {
   return (
     <div>
       <div>
-         <MicroApp 
-           name="app1"
-           // 自定义 loading 动画
-           loader={loading => <div>loading: {loading}</div>}
-           // 微应用容器 class
-           className="myContainer"
-           // wrapper class，仅开启 loading 动画时生效
-           wrapperClassName="myWrapper"
-         />
+         <MicroApp name="app1" autoSetLoading />
       </div>
     </div>
   )
 }
 ```
 
-路由模式下，你可以这样设置一些静态配置：
+默认情况下，当我们检测到你使用的是 antd 组件库时，loading 动画使用的是 antd Spin 组件。
+
+如果你需要定制自己的 loading 动画，或者修改组件的样式，你可以这样处理：
+
+```jsx
+import { MicroApp } from 'umi';
+
+export function MyPage() {
+
+  return (
+    <div>
+      <MicroApp
+        name="app1"
+        autoSetLoading
+        // 设置自定义 loading 动画
+        loader={loading => <div>loading: {loading}</div>}
+        // 微应用容器 class
+        className="myContainer"
+        // wrapper class，仅开启 loading 动画时生效
+        wrapperClassName="myWrapper"
+      />
+    </div>
+  )
+}
+```
+
+路由模式下，你可以这样设置一些静态配置开启 loading 动画：
 
 ```js
 {
   path: '/user',
   microApp: 'user',
   microAppProps: {
+    autoSetLoading: true,
     className: 'myContainer',
     wrapperClassName: 'myWrapper',
   }
-},
+}
 ```
 
 或者，你可以通过设置 autoSetLoading false 来关闭自动的 loading 动画：