From 6b82871f5f9176933dcf2b394e299ade446e4a05 Mon Sep 17 00:00:00 2001 From: Linghao Su Date: Mon, 27 Nov 2023 22:56:56 +0800 Subject: [PATCH] fix(vue): add docs and adjust to render --- packages/ui-bindings/vue/README.md | 48 ++++++++++--------- packages/ui-bindings/vue/README.zh-CN.md | 38 +++++++-------- packages/ui-bindings/vue/src/ErrorBoundary.ts | 2 +- packages/ui-bindings/vue/src/MicroApp.ts | 48 +++++++++++-------- .../ui-bindings/vue/src/MicroAppLoader.ts | 2 +- 5 files changed, 74 insertions(+), 64 deletions(-) diff --git a/packages/ui-bindings/vue/README.md b/packages/ui-bindings/vue/README.md index f3307003d..99242fec4 100644 --- a/packages/ui-bindings/vue/README.md +++ b/packages/ui-bindings/vue/README.md @@ -7,17 +7,18 @@ npm i @qiankunjs/vue ``` ## MicroApp Component + Load (or unload) a sub-application directly through the `` component, which provides capabilities related to loading and error capturing: ```vue ``` + When enabling the sub-application loading animation or error capturing capabilities, an additional style class `wrapperClassName` is accepted by the sub-application. The rendered result is as follows: ```vue @@ -29,6 +30,7 @@ When enabling the sub-application loading animation or error capturing capabilit ``` ### Loading Animation + After enabling this feature, a loading animation will automatically be displayed while the sub-application is loading. When the sub-application finishes mounting and becomes in the MOUNTED state, the loading state ends, and the sub-application content is displayed. Simply pass `autoSetLoading` as a parameter: @@ -36,75 +38,77 @@ Simply pass `autoSetLoading` as a parameter: ```vue ``` + #### Custom Loading Animation + If you wish to override the default loading animation style, you can customize the loading component by using the loader slot as the sub-application's loading animation. ```vue ``` + Here, `loading` is a boolean type parameter; when true, it indicates that it is still in the loading state, and when false, it indicates that the loading state has ended. ### Error Capturing + After enabling this feature, when the sub-application encounters an exception while loading, an error message will automatically be displayed. You can pass the `autoCaptureError` property to the sub-application to enable error capturing capabilities: ```vue ``` + #### Custom Error Capturing + If you wish to override the default error capturing component style, you can customize the error capturing component for the sub-application using the errorBoundary slot: ```vue ``` ### Component Properties -| Property | Required | Description | Type | Default Value | -| ------------------ | -------- | ----------------------------------------------------------------------------- | --------- | ------------- | -| `name` | Yes | The name of the micro-application | `string` | | -| `entry` | Yes | The HTML address of the micro-application | `string` | | -| `autoSetLoading` | No | Automatically set the loading status of the micro-application | `boolean` | `false` | -| `autoCaptureError` | No | Automatically set error capturing for the micro-application | `boolean` | `false` | -| `className` | No | The style class for the micro-application | `string` | `undefined` | -| `wrapperClassName` | No | The style class wrapping the micro-application's loading and error components | `string` | `undefined` | +| Property | Required | Description | Type | Default Value | +| --- | --- | --- | --- | --- | +| `name` | Yes | The name of the micro-application | `string` | | +| `entry` | Yes | The HTML address of the micro-application | `string` | | +| `autoSetLoading` | No | Automatically set the loading status of the micro-application | `boolean` | `false` | +| `autoCaptureError` | No | Automatically set error capturing for the micro-application | `boolean` | `false` | +| `className` | No | The style class for the micro-application | `string` | `undefined` | +| `wrapperClassName` | No | The style class wrapping the micro-application's loading and error components | `string` | `undefined` | ### Component Slots | Slot | Description | | --------------- | -------------------- | | `loader` | Loading state slot | -| `errorBoundary` | Error capturing slot | \ No newline at end of file +| `errorBoundary` | Error capturing slot | diff --git a/packages/ui-bindings/vue/README.zh-CN.md b/packages/ui-bindings/vue/README.zh-CN.md index 248d268f5..e11c305a3 100644 --- a/packages/ui-bindings/vue/README.zh-CN.md +++ b/packages/ui-bindings/vue/README.zh-CN.md @@ -6,20 +6,19 @@ npm i @qiankunjs/vue ``` - ## MicroApp 组件 -直接通过 组件加载（或卸载）子应用，该组件提供了 loading 以及错误捕获相关的能力： +直接通过 组件加载（或卸载）子应用，该组件提供了 loading 以及错误捕获相关的能力： ```vue ``` + 当启用子应用加载动画或错误捕获能力时，子应用接受一个额外的样式类 wrapperClassName，渲染的结果如下所示： ```vue @@ -31,6 +30,7 @@ import { MicroApp } from '@qiankunjs/vue'; ``` ### 加载动画 + 启用此能力后，当子应用正在加载时，会自动显示加载动画。当子应用挂载完成变成 MOUNTED 状态时，加载状态结束，显示子应用内容。 直接将 autoSetLoading 作为参数传入即可： @@ -38,13 +38,14 @@ import { MicroApp } from '@qiankunjs/vue'; ```vue ``` + #### 自定义加载动画 + 如果您希望覆盖默认的加载动画样式时，可以通过 loader slot 来自定义加载组件 loader 作为子应用的加载动画。 ```vue @@ -61,23 +62,26 @@ import { MicroApp } from '@qiankunjs/vue'; ``` + 其中，loading 为 boolean 类型参数，为 true 时表示仍在加载状态，为 false 时表示加载状态已结束。 ### 错误捕获 -启用此能力后，当子应用加载出现异常时，会自动显示错误信息。可以向子应用传入 autoCaptureError 属性以开启子应用错误捕获能力： +启用此能力后，当子应用加载出现异常时，会自动显示错误信息。可以向子应用传入 autoCaptureError 属性以开启子应用错误捕获能力： ```vue ``` + #### 自定义错误捕获 -如果您希望覆盖默认的错误捕获组件样式时，可以通过 errorBoundary slot 来自定义子应用的错误捕获组件： + +如果您希望覆盖默认的错误捕获组件样式时，可以通过 errorBoundary slot 来自定义子应用的错误捕获组件： + ```vue