feat: 完善确认框组件

FightingDesign · Aug 15, 2023 · 6f239a9 · 6f239a9
1 parent 44436bf
commit 6f239a9
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 20 deletions.
diff --git a/packages/fighting-design/confirm-box/src/confirm-box.vue b/packages/fighting-design/confirm-box/src/confirm-box.vue
@@ -5,6 +5,7 @@
   import { FCloseBtn } from '../../close-btn'
   import { ref } from 'vue'
   import { useRun } from '../../_hooks'
+  import { isFunction } from '../../_utils'
 
   defineOptions({ name: 'FConfirmBox' })
 
@@ -14,6 +15,8 @@
 
   /** 是否展示确认框 */
   const isShow = ref(prop.show)
+  /** button loading */
+  const isLoading = ref(false)
 
   /** 关闭确认框 */
   const handelClose = (): void => {
@@ -29,6 +32,36 @@
   const handleCloseEnd = (): void => {
     run(prop.onClose, isShow.value)
   }
+
+  /**
+   * 点击确认执行的回调方法
+   *
+   * @param { Object } evt 事件对象
+   */
+  const handelConfirm = async (evt: MouseEvent): Promise<void> => {
+    isLoading.value = true
+
+    if (isFunction(prop.onConfirm)) {
+      await prop.onConfirm(evt)
+    }
+
+    handelClose()
+  }
+
+  /**
+   * 点击取消执行的回调方法
+   *
+   * @param { Object } evt 事件对象
+   */
+  const handelCancel = async (evt: MouseEvent): Promise<void> => {
+    isLoading.value = true
+
+    if (isFunction(prop.onCancel)) {
+      await prop.onCancel(evt)
+    }
+
+    handelClose()
+  }
 </script>
 
 <template>
@@ -49,7 +82,7 @@
           <div class="f-confirm-box__header">
             <div class="f-confirm-box__title">{{ title }}</div>
 
-            <f-close-btn :on-click="handelClose" />
+            <f-close-btn :disabled="isLoading" :on-click="handelClose" />
           </div>
 
           <!-- 身体 -->
@@ -58,8 +91,10 @@
           <!-- 底部 -->
           <div class="f-confirm-box__footer">
             <f-space>
-              <f-button :on-click="onCancel">取消</f-button>
-              <f-button type="primary" :on-click="onConfirm">确定</f-button>
+              <f-button :loading="isLoading" :on-click="handelCancel">取消</f-button>
+              <f-button :loading="isLoading" type="primary" :on-click="handelConfirm">
+                确定
+              </f-button>
             </f-space>
           </div>
         </div>

diff --git a/start/src/App.vue b/start/src/App.vue
@@ -1,33 +1,21 @@
 <script lang="ts" setup>
   import { FConfirmBox } from 'fighting-design'
-  import { ref } from 'vue'
-
-  import Box from '../../packages/fighting-design/confirm-box/src/confirm-box.vue'
-  const show = ref(false)
 
   const open = (): void => {
-    // show.value = true
-
     FConfirmBox({
       title: '标题',
       content: '这是内容',
       onConfirm: () => {
-        console.log('点击确定')
-      },
-      onCancel: () => {
-        console.log('点击了取消')
-      },
-      onClose: () => {
-        console.log('关闭了')
-      },
-      onOpen: () => {
-        console.log('开启了')
+        return new Promise(res => {
+          setTimeout(() => {
+            res('123')
+          }, 2000)
+        })
       }
     })
   }
 </script>
 
 <template>
-  <!-- <box :show="show" title="123" /> -->
   <f-button :on-click="open">提示</f-button>
 </template>