FmModal 组件增加 beforeClose 回调函数，优化关闭逻辑并支持异步处理

hooray · hooray · commit b6aceba8c190 · 2025-06-10T15:28:06.000+08:00
diff --git a/src/ui/components/FmModal/dialog/DialogContent.vue b/src/ui/components/FmModal/dialog/DialogContent.vue
@@ -13,6 +13,7 @@ import { computed } from 'vue'
 import { cn } from '@/utils'
 
 const props = defineProps<DialogContentProps & {
+  modalId: string
   class?: HTMLAttributes['class']
   open?: boolean
   maximize?: boolean
@@ -54,8 +55,6 @@ watch(showOverlay, (val) => {
     isLocked.value = false
   }
 })
-
-const id = inject('ModalId')
 </script>
 
 <template>
@@ -73,7 +72,7 @@ const id = inject('ModalId')
     >
       <div
         v-if="showOverlay"
-        :data-modal-id="id"
+        :data-modal-id="props.modalId"
         :class="cn('fixed inset-0 z-2000 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/50 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0', {
           'backdrop-blur-sm': props.overlayBlur,
         })"
diff --git a/src/ui/components/FmModal/index.ts b/src/ui/components/FmModal/index.ts
@@ -22,6 +22,10 @@ export interface ModalProps {
   cancelButtonText?: string
   confirmButtonDisabled?: boolean
   confirmButtonLoading?: boolean
+  beforeClose?: (
+    action: 'confirm' | 'cancel' | 'close',
+    done: () => void
+  ) => void
   header?: boolean
   footer?: boolean
   closeOnClickOverlay?: boolean
@@ -43,13 +47,13 @@ export interface ModalEmits {
 
 type alertOptions = Pick<ModalProps, 'title' | 'description' | 'icon' | 'alignCenter' | 'overlay' | 'overlayBlur' | 'confirmButtonText' | 'confirmButtonDisabled' | 'confirmButtonLoading' | 'closeOnClickOverlay' | 'closeOnPressEscape' | 'class' | 'headerClass' | 'contentClass' | 'footerClass'> & {
   content: string
-  onConfirm?: () => any
+  onConfirm?: () => void
 }
 
-type confirmOptions = Pick<ModalProps, 'title' | 'description' | 'alignCenter' | 'overlay' | 'overlayBlur' | 'confirmButtonText' | 'cancelButtonText' | 'confirmButtonDisabled' | 'confirmButtonLoading' | 'closeOnClickOverlay' | 'closeOnPressEscape' | 'class' | 'headerClass' | 'contentClass' | 'footerClass'> & {
+type confirmOptions = Pick<ModalProps, 'title' | 'description' | 'alignCenter' | 'overlay' | 'overlayBlur' | 'confirmButtonText' | 'cancelButtonText' | 'confirmButtonDisabled' | 'confirmButtonLoading' | 'beforeClose' | 'closeOnClickOverlay' | 'closeOnPressEscape' | 'class' | 'headerClass' | 'contentClass' | 'footerClass'> & {
   content: string
-  onConfirm?: () => any
-  onCancel?: () => any
+  onConfirm?: () => void
+  onCancel?: () => void
 }
 
 export function useFmModal() {
diff --git a/src/ui/components/FmModal/index.vue b/src/ui/components/FmModal/index.vue
@@ -53,34 +53,79 @@ defineExpose({
   areaRef: dialogAreaRef,
 })
 
-const id = useId()
-provide('ModalId', id)
-
+const modalId = useId()
 const isOpen = ref(props.modelValue)
 
 watch(() => props.modelValue, (newValue) => {
   isOpen.value = newValue
 })
 
-function updateOpen(value: boolean) {
-  isOpen.value = value
-  emits('update:modelValue', value)
-  if (value) {
+watch(isOpen, (val) => {
+  emits('update:modelValue', val)
+  if (val) {
     emits('open')
   }
   else {
     emits('close')
   }
+})
+
+async function updateOpen(value: boolean) {
+  if (value) {
+    isOpen.value = value
+    emits('open')
+  }
+  else {
+    if (props.beforeClose) {
+      await props.beforeClose(
+        'close',
+        () => {
+          isOpen.value = value
+          emits('close')
+        },
+      )
+    }
+    else {
+      isOpen.value = value
+      emits('close')
+    }
+  }
 }
 
-function onConfirm() {
-  updateOpen(false)
-  emits('confirm')
+const isConfirmButtonLoading = ref(false)
+
+async function onConfirm() {
+  if (props.beforeClose) {
+    isConfirmButtonLoading.value = true
+    await props.beforeClose(
+      'confirm',
+      () => {
+        isOpen.value = false
+        emits('confirm')
+      },
+    )
+    isConfirmButtonLoading.value = false
+  }
+  else {
+    isOpen.value = false
+    emits('confirm')
+  }
 }
 
-function onCancel() {
-  updateOpen(false)
-  emits('cancel')
+async function onCancel() {
+  if (props.beforeClose) {
+    await props.beforeClose(
+      'cancel',
+      () => {
+        isOpen.value = false
+        emits('cancel')
+      },
+    )
+  }
+  else {
+    isOpen.value = false
+    emits('cancel')
+  }
 }
 
 function handleFocusOutside(e: Event) {
@@ -89,7 +134,7 @@ function handleFocusOutside(e: Event) {
 }
 
 function handleClickOutside(e: Event) {
-  if (!props.closeOnClickOverlay || (e.target as HTMLElement).dataset.modalId !== id) {
+  if (!props.closeOnClickOverlay || (e.target as HTMLElement).dataset.modalId !== modalId) {
     e.preventDefault()
     e.stopPropagation()
   }
@@ -115,6 +160,7 @@ function handleAnimationEnd() {
 <template>
   <Dialog :modal="false" :open="isOpen" @update:open="updateOpen">
     <DialogContent
+      :modal-id="modalId"
       :open="isOpen"
       :closable="props.closable"
       :overlay="props.overlay"
@@ -176,7 +222,7 @@ function handleAnimationEnd() {
           <FmButton v-if="showCancelButton" variant="outline" class="w-full" @click="onCancel">
             {{ cancelButtonText }}
           </FmButton>
-          <FmButton v-if="showConfirmButton" :disabled="confirmButtonDisabled" :loading="confirmButtonLoading" class="w-full" @click="onConfirm">
+          <FmButton v-if="showConfirmButton" :disabled="confirmButtonDisabled" :loading="confirmButtonLoading || isConfirmButtonLoading" class="w-full" @click="onConfirm">
             {{ confirmButtonText }}
           </FmButton>
         </slot>
diff --git a/src/views/feature/component/built_in/modal/index.vue b/src/views/feature/component/built_in/modal/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { toast } from 'vue-sonner'
 import { useFmModal } from '@/ui/components/FmModal'
 
 definePage({
@@ -24,34 +25,86 @@ watch(() => modalInfo.value.loading, (loading) => {
   }
 })
 
+function handleBeforeClose(action: 'confirm' | 'cancel' | 'close', done: () => void) {
+  if (action === 'close') {
+    useFmModal().confirm({
+      title: '提示',
+      content: '确定要关闭吗？',
+      onConfirm: () => {
+        done()
+      },
+    })
+  }
+  else {
+    done()
+  }
+}
+
 function showModalInfo() {
   useFmModal().info({
     title: '温馨提醒',
     content: '这是 info 弹窗',
+    onConfirm: () => {
+      toast.info('你点了确定')
+    },
   })
 }
 function showModalSuccess() {
   useFmModal().success({
     title: '温馨提醒',
     content: '这是 success 弹窗',
+    onConfirm: () => {
+      toast.info('你点了确定')
+    },
   })
 }
 function showModalWarning() {
   useFmModal().warning({
     title: '温馨提醒',
     content: '这是 warning 弹窗',
+    onConfirm: () => {
+      toast.info('你点了确定')
+    },
   })
 }
 function showModalError() {
   useFmModal().error({
     title: '温馨提醒',
     content: '这是 confirm 弹窗',
+    onConfirm: () => {
+      toast.info('你点了确定')
+    },
   })
 }
 function showModalConfirm() {
   useFmModal().confirm({
     title: '温馨提醒',
     content: '这是 confirm 弹窗',
+    onConfirm: () => {
+      toast.info('你点了确定')
+    },
+  })
+}
+function showModalPromiseConfirm() {
+  useFmModal().confirm({
+    title: '温馨提醒',
+    content: '这是 confirm 弹窗',
+    confirmButtonText: '确认（随机成功或失败）',
+    beforeClose: async (action, done) => {
+      if (action === 'confirm') {
+        await new Promise(resolve => setTimeout(resolve, 1000))
+        if (Math.random() > 0.5) {
+          toast.success('成功了！')
+          done()
+        }
+        else {
+          toast.error('失败了！')
+        }
+      }
+      else {
+        done()
+      }
+    },
   })
 }
 </script>
@@ -63,7 +116,7 @@ function showModalConfirm() {
         <FmButton @click="modal = true">
           打开
         </FmButton>
-        <FmModal v-model="modal" title="标题" description="这里是一段描述介绍" :closable="modalInfo.closable" :center="modalInfo.center" :loading="modalInfo.loading" :header="modalInfo.header" :footer="modalInfo.footer">
+        <FmModal v-model="modal" title="标题" description="这里是一段描述介绍" :closable="modalInfo.closable" :center="modalInfo.center" :loading="modalInfo.loading" :header="modalInfo.header" :footer="modalInfo.footer" :before-close="handleBeforeClose">
           <div :class="modalInfo.contentHeight">
             <div class="flex-start-center flex-wrap gap-2">
               <FmButton :variant="modalInfo.closable ? 'default' : 'outline'" class="w-full" @click="modalInfo.closable = !modalInfo.closable">
@@ -105,6 +158,9 @@ function showModalConfirm() {
           <FmButton @click="showModalConfirm">
             Confirm
           </FmButton>
+          <FmButton @click="showModalPromiseConfirm">
+            Confirm with promise
+          </FmButton>
         </div>
       </FmPageMain>
     </div>
