From 8f32632fe8a1990bfa17c892663ff007eb71e232 Mon Sep 17 00:00:00 2001
From: zcating <zcating@qq.com>
Date: Mon, 6 Dec 2021 10:21:52 +0800
Subject: [PATCH] =?UTF-8?q?feat(button):=20=E6=B7=BB=E5=8A=A0=20showLoadin?=
 =?UTF-8?q?g=20=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui-vue/devui/button/src/button.tsx     |  8 +--
 .../devui-vue/docs/components/button/index.md | 64 +++++++++++++++----
 2 files changed, 53 insertions(+), 19 deletions(-)

diff --git a/packages/devui-vue/devui/button/src/button.tsx b/packages/devui-vue/devui/button/src/button.tsx
index 0130fd82..554a99b2 100644
--- a/packages/devui-vue/devui/button/src/button.tsx
+++ b/packages/devui-vue/devui/button/src/button.tsx
@@ -49,20 +49,16 @@ export default defineComponent({
         width
       } = props;
       return (
-        <div class="devui-btn-host" {...ctx.attrs}>
+        <div class="devui-btn-host" {...ctx.attrs} v-dLoading={showLoading}>
           <button
             class={btnClass.value}
             type={type}
             disabled={disabled}
             style={{ width }}
             onClick={onClick}
-          // dLoading
-          // [showLoading]="showLoading"
-          // [loadingTemplateRef]="loadingTemplateRef"
-          // [dAutoFocus]="autofocus"
           >
             {!!icon ? (
-              <Icon name={props.icon} class={iconClass.value} />
+              <Icon name={icon} class={iconClass.value} />
             ) : null}
             <span class="button-content" ref={buttonContent}>
               {ctx.slots.default?.()}
diff --git a/packages/devui-vue/docs/components/button/index.md b/packages/devui-vue/docs/components/button/index.md
index 3aa254ac..23204dab 100644
--- a/packages/devui-vue/docs/components/button/index.md
+++ b/packages/devui-vue/docs/components/button/index.md
@@ -64,12 +64,35 @@
 :::
 
 ### 加载中状态
-（该功能正在开发中）
 :::demo
 ```vue
 <template>
-  <d-button> click me! </d-button>
+  <d-button :showLoading="showLoading" @click="handleClick"> click me! </d-button>
 </template>
+<script>
+  import { ref, onBeforeUnmount } from 'vue';
+  export default {
+    setup() {
+      const showLoading = ref(false);
+      const timerId = ref();      
+      const handleClick = () => {
+        showLoading.value = true;
+        timerId.value = setTimeout(() => {
+          showLoading.value = false;
+        }, 2000);
+      }
+
+      onBeforeUnmount(() => {
+        if (!timerId.value) {
+          return;
+        }
+        clearTimeout(timerId.value);
+      });
+
+      return { showLoading, handleClick };
+    }
+  }
+</script>
 ```
 :::
 
@@ -148,20 +171,35 @@
 
 ### API
 d-button 参数
-|   参数    |                             类型                             |   默认    | 说明                             |
-| :-------: | :----------------------------------------------------------: | :-------: | :------------------------------- |
-|   type    |              `'button' \| 'submit' \| 'reset'`               | 'button'  | 可选，按钮类型                   |
-| btnStyle  | `'common' \| 'primary' \| 'text' \| 'text-dark' \| 'danger'` | 'primary' | 可选，按钮风格                   |
-| position  |               `'left' \| 'right' \| 'default'`               | 'default' | 可选，按钮位置                   |
-|   size    |                `'lg' \| 'md' \| 'sm' \| 'xs'`                |   'md'    | 可选，按钮大小                   |
-| bordered  |                          `boolean`                           |   false   | 可选，是否有边框                 |
-|   icon    |                           `string`                           |    --     | 可选，点击背景触发的事件         |
-|   width   |                           `string`                           |    --     | 可选，弹出框宽度(e.g '300px')    |
-| disabled  |                          `boolean`                           |   false   | 可选，是否禁用button             |
-| autofocus |                          `boolean`                           |   false   | 可选，按钮加载时是否自动获得焦点 |
+|   参数    |               类型                |   默认    | 说明                             |
+| :-------: | :-------------------------------: | :-------: | :------------------------------- |
+|   type    | `'button' \| 'submit' \| 'reset'` | 'button'  | 可选，按钮类型                   |
+| btnStyle  |          `IButtonStyle`           | 'primary' | 可选，按钮风格                   |
+| position  |         `IButtonPosition`         | 'default' | 可选，按钮位置                   |
+|   size    |           `IButtonSize`           |   'md'    | 可选，按钮大小                   |
+| bordered  |             `boolean`             |   false   | 可选，是否有边框                 |
+|   icon    |             `string`              |    --     | 可选，点击背景触发的事件         |
+|   width   |             `string`              |    --     | 可选，弹出框宽度(e.g '300px')    |
+| disabled  |             `boolean`             |   false   | 可选，是否禁用button             |
+| autofocus |             `boolean`             |   false   | 可选，按钮加载时是否自动获得焦点 |
 
 d-button 事件
 |  参数   |             类型              | 默认  | 说明           |
 | :-----: | :---------------------------: | :---: | :------------- |
 | onClick | `(event: MouseEvent) => void` |  --   | 可选，点击事件 |
 
+
+IButtonStyle 
+```typescript
+type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger' | 'success' | 'warning';
+```
+
+IButtonSize
+```typescript
+type IButtonSize = 'lg' | 'md' | 'sm' | 'xs';
+```
+
+IButtonPosition
+```typescript
+type IButtonPosition = 'left' | 'right' | 'default';
+```
-- 
Gitee