From 5ada043ee985e97973f87d09ef70ec416073d2f5 Mon Sep 17 00:00:00 2001
From: mini2024 <mini2024@oo1.dev>
Date: Fri, 28 Feb 2025 00:35:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20APopconfirmButton?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6=E5=B9=B6=E6=9B=B4=E6=96=B0=20index.page.v?=
 =?UTF-8?q?ue=20=E4=BB=A5=E9=9B=86=E6=88=90=E7=A1=AE=E8=AE=A4=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/AntdV/APopconfirmButton.vue | 41 +++++++++++++++++++++++++++
 src/pages/AntdV/index.page.vue        | 35 +++++++++++++++--------
 2 files changed, 64 insertions(+), 12 deletions(-)
 create mode 100644 src/pages/AntdV/APopconfirmButton.vue

diff --git a/src/pages/AntdV/APopconfirmButton.vue b/src/pages/AntdV/APopconfirmButton.vue
new file mode 100644
index 0000000..0f49612
--- /dev/null
+++ b/src/pages/AntdV/APopconfirmButton.vue
@@ -0,0 +1,41 @@
+<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>
diff --git a/src/pages/AntdV/index.page.vue b/src/pages/AntdV/index.page.vue
index 3350cdc..3f7fadf 100644
--- a/src/pages/AntdV/index.page.vue
+++ b/src/pages/AntdV/index.page.vue
@@ -1,17 +1,28 @@
-<script setup></script>
+<script setup>
+import APopconfirmButton from './APopconfirmButton.vue';
+</script>
 <template>
   <ACard>
-    <AForm name="basic" :label-col="{ style: { width: '7em' } }">
-      <AFormItem required label="Username">
-        <AInput />
-      </AFormItem>
-      <AFormItem label="Password">
-        <AInput />
-      </AFormItem>
-      <AFormItem>
-        <AButton html-type="submit" type="primary">Submit</AButton>
-      </AFormItem>
-    </AForm>
+    <ACard>
+      <AForm name="basic" :label-col="{ style: { width: '7em' } }">
+        <AFormItem required label="Username">
+          <AInput />
+        </AFormItem>
+        <AFormItem label="Password">
+          <AInput />
+        </AFormItem>
+        <AFormItem>
+          <AButton html-type="submit" type="primary">Submit</AButton>
+        </AFormItem>
+      </AForm>
+    </ACard>
+
+    <ACard class="mt-4">
+      <AButton size="small" type="text">Delete</AButton>
+      <APopconfirmButton #default="{ loading, open }">
+        <AButton :disabled="loading" size="small" @click="open" danger type="text">Delete</AButton>
+      </APopconfirmButton>
+    </ACard>
   </ACard>
 </template>
 <style lang="scss" scoped></style>