feat: 函数式弹出框新增确认框ElPopconfirm按钮

src/components/ReDialog/index.vue

@@ -149,19 +149,34 @@ function handleClose(
         <component :is="options?.footerRenderer({ options, index })" />
       </template>
       <span v-else>
-        <el-button
+        <template v-for="(btn, key) in footerButtons(options)" :key="key">
-          v-for="(btn, key) in footerButtons(options)"
+          <el-popconfirm
-          :key="key"
+            v-if="btn.popconfirm"
-          v-bind="btn"
+            :title="btn?.tips"
-          @click="
+            @confirm="
-            btn.btnClick({
+              btn.btnClick({
-              dialog: { options, index },
+                dialog: { options, index },
-              button: { btn, index: key }
+                button: { btn, index: key }
-            })
+              })
-          "
+            "
-        >
+          >
-          {{ btn?.label }}
+            <template #reference>
-        </el-button>
+              <el-button v-bind="btn">{{ btn?.label }}</el-button>
+            </template>
+          </el-popconfirm>
+          <el-button
+            v-else
+            v-bind="btn"
+            @click="
+              btn.btnClick({
+                dialog: { options, index },
+                button: { btn, index: key }
+              })
+            "
+          >
+            {{ btn?.label }}
+          </el-button>
+        </template>
       </span>
     </template>
   </el-dialog>

src/components/ReDialog/type.ts

@@ -78,6 +78,10 @@ type ButtonProps = {
   plain?: boolean;
   /** 是否为文字按钮，默认 `false` */
   text?: boolean;
+  /** 是否使用`Popconfirm 气泡确认框`进行确认button，默认 `false` */
+  popconfirm?: boolean;
+  /** `Popconfirm`确认框提示信息 */
+  tips?: string;
   /** 是否显示文字按钮背景颜色，默认 `false` */
   bg?: boolean;
   /** 是否为链接按钮，默认 `false` */

src/views/components/dialog/index.vue

@@ -4,7 +4,7 @@ import { h, createVNode, ref } from "vue";
 import { message } from "@/utils/message";
 import formPrimitive from "./formPrimitive.vue";
 import forms, { type FormProps } from "./form.vue";
-import { cloneDeep, debounce } from "@pureadmin/utils";
+import { cloneDeep, debounce, isFunction } from "@pureadmin/utils";
 import {
   addDialog,
   closeDialog,
@@ -280,6 +280,44 @@ function onUpdateClick() {
   });
 }
 
+// popconfirm 确认框
+function onPopconfirmClick() {
+  addDialog({
+    width: "30%",
+    title: "popconfirm确认框示例",
+    footerButtons: [
+      {
+        label: "取消",
+        bg: true,
+        btnClick: ({ dialog: { options, index } }) => {
+          const done = () => closeDialog(options, index, { command: "cancel" });
+          if (options?.beforeCancel && isFunction(options?.beforeCancel)) {
+            options.beforeCancel(done, { options, index });
+          } else {
+            done();
+          }
+        }
+      },
+      {
+        label: "确认",
+        type: "primary",
+        bg: true,
+        popconfirm: true,
+        tips: `是否确认修改当前数据`,
+        btnClick: ({ dialog: { options, index } }) => {
+          const done = () => closeDialog(options, index, { command: "sure" });
+          if (options?.beforeSure && isFunction(options?.beforeSure)) {
+            options.beforeSure(done, { options, index });
+          } else {
+            done();
+          }
+        }
+      }
+    ],
+    contentRenderer: () => <p>这是`Popconfirm`确认框示例</p>
+  });
+}
+
 // 结合Form表单（第一种方式，弹框关闭立刻恢复初始值）通过 props 属性接收子组件的 prop 并赋值
 function onFormOneClick() {
   addDialog({
@@ -496,6 +534,7 @@ function onBeforeSureClick() {
       <el-button @click="onCloseCallBackClick"> 关闭后的回调 </el-button>
       <el-button @click="onNestingClick"> 嵌套的弹框 </el-button>
       <el-button @click="onUpdateClick"> 更改弹框自身属性值 </el-button>
+      <el-button @click="onPopconfirmClick">popconfirm确认框</el-button>
     </el-space>
     <el-divider />
     <el-space wrap>