重命名 APopconfirmButton 为 HAPopconfirmButton 并更新相关引用

src/pages/AntdV/APopconfirmButton.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-defineOptions({ inheritAttrs: false });
-const loading = shallowRef(false);
-const open = shallowRef(false);
-function openPopconfirm() {
-  open.value = true;
-}
-
-function handleConfirm() {
-  loading.value = true;
-  setTimeout(() => {
-    loading.value = false;
-  }, 2000);
-}
-</script>
-
-<template>
-  <APopconfirm
-    :open
-    :okButtonProps="{ loading: loading }"
-    :cancelButtonProps="{ disabled: loading ? true : undefined }"
-    :disabled="true"
-    title="你确定吗？ 🤔 "
-    :description="loading ? '删除中...' : '删除后无法恢复'"
-    arrowPointAtCenter
-    placement="topRight"
-    @confirm="handleConfirm"
-    @cancel="open = false"
-    :align="{
-      targetOffset: [0, 0],
-    }"
-  >
-    <slot :loading="loading" :open="openPopconfirm" />
-  </APopconfirm>
-</template>
-
-<style lang="less">
-[class^='ant-'] .anticon svg {
-  vertical-align: unset; /* baseline */
-}
-</style>

src/pages/AntdV/HAPopconfirmButton.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { PopconfirmProps } from 'ant-design-vue';
+defineOptions({ inheritAttrs: true });
+
+type NotUndefined<T> = T extends undefined ? never : T;
+type PopconfirmOnConfirmParameters = Parameters<NotUndefined<PopconfirmProps['onConfirm']>>;
+type HPopconfirmProps = {
+  onConfirm?: (...args: PopconfirmOnConfirmParameters) => Promise<void>;
+};
+
+const props = defineProps<HPopconfirmProps>();
+
+const _loading = shallowRef(false);
+const onConfirm: PopconfirmProps['onConfirm'] = async (e) => {
+  if (props.onConfirm) {
+    try {
+      _loading.value = true;
+      await props.onConfirm(e);
+    } finally {
+      _loading.value = false;
+    }
+  }
+};
+</script>
+
+<template>
+  <APopconfirm
+    :arrowPointAtCenter="!true"
+    :disabled="_loading"
+    placement="topRight"
+    :align="{
+      targetOffset: [0, 0],
+    }"
+    :onConfirm
+    :cancelButtonProps="{ disabled: _loading }"
+  >
+    <slot />
+  </APopconfirm>
+</template>
+
+<style lang="less">
+[class^='ant-'] .anticon svg {
+  vertical-align: unset; /* baseline */
+}
+</style>

src/pages/AntdV/index.page.vue

@@ -1,13 +1,33 @@
-<script setup>
+<script setup lang="ts">
-import APopconfirmButton from './APopconfirmButton.vue';
+import { message } from 'ant-design-vue';
+
+import HAPopconfirmButton from './HAPopconfirmButton.vue';
+
+async function handleConfirmAsync(e: MouseEvent) {
+  console.debug('handleConfirmAsync', e);
+  await new Promise((resolve) => {
+    setTimeout(resolve, 2000);
+  });
+  message.success('哇！数据已被成功送入黑洞 🕳️');
+}
 </script>
+
 <template>
   <ACard>
     <ACard>
-      <AButton size="small" type="text">Delete</AButton>
+      <APopconfirm @confirm="handleConfirmAsync">
-      <APopconfirmButton #default="{ loading, open }">
+        <AButton size="small" type="text">APopconfirm</AButton>
-        <AButton :disabled="loading" size="small" @click="open" danger type="text">Delete</AButton>
+      </APopconfirm>
-      </APopconfirmButton>
+
+      <AButton size="small" type="text">AButton</AButton>
+
+      <HAPopconfirmButton
+        title="你确定吗？ 🤔 "
+        description="别担心，我们只是假装很严肃 🎭"
+        @confirm="handleConfirmAsync"
+      >
+        <AButton size="small" danger type="text">HAPopconfirmButton</AButton>
+      </HAPopconfirmButton>
     </ACard>
     <ACard class="mt-4">
       <AForm name="basic" :label-col="{ style: { width: '7em' } }">
@@ -24,4 +44,3 @@ import APopconfirmButton from './APopconfirmButton.vue';
     </ACard>
   </ACard>
 </template>
-<style lang="scss" scoped></style>