chore: update

src/components/ReDialog/index.vue

@@ -37,6 +37,7 @@ const footerButtons = computed(() => {
             type: "primary",
             text: true,
             bg: true,
+            popconfirm: options?.popconfirm,
             btnClick: ({ dialog: { options, index } }) => {
               const done = () =>
                 closeDialog(options, index, { command: "sure" });
@@ -152,7 +153,7 @@ function handleClose(
         <template v-for="(btn, key) in footerButtons(options)" :key="key">
           <el-popconfirm
             v-if="btn.popconfirm"
-            :title="btn?.tips"
+            v-bind="btn.popconfirm"
             @confirm="
               btn.btnClick({
                 dialog: { options, index },

src/components/ReDialog/type.ts

@@ -11,6 +11,13 @@ type ArgsType = {
   /** `cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或空白页或按下了esc键 */
   command: "cancel" | "sure" | "close";
 };
+type ButtonType =
+  | "primary"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info"
+  | "text";
 
 /** https://element-plus.org/zh-CN/component/dialog.html#attributes */
 type DialogProps = {
@@ -58,6 +65,34 @@ type DialogProps = {
   destroyOnClose?: boolean;
 };
 
+//element-plus.org/zh-CN/component/popconfirm.html#attributes
+type Popconfirm = {
+  /** 标题 */
+  title?: string;
+  /** 确认按钮文字 */
+  confirmButtonText?: string;
+  /** 取消按钮文字 */
+  cancelButtonText?: string;
+  /** 确认按钮类型，默认 `primary` */
+  confirmButtonType?: ButtonType;
+  /** 取消按钮类型，默认 `text` */
+  cancelButtonType?: ButtonType;
+  /** 自定义图标，默认 `QuestionFilled` */
+  icon?: string | Component;
+  /** `Icon` 颜色，默认 `#f90` */
+  iconColor?: string;
+  /** 是否隐藏 `Icon`，默认 `false` */
+  hideIcon?: boolean;
+  /** 关闭时的延迟，默认 `200` */
+  hideAfter?: number;
+  /** 是否将 `popover` 的下拉列表插入至 `body` 元素，默认 `true` */
+  teleported?: boolean;
+  /** 当 `popover` 组件长时间不触发且 `persistent` 属性设置为 `false` 时, `popover` 将会被删除，默认 `false` */
+  persistent?: boolean;
+  /** 弹层宽度，最小宽度 `150px`，默认 `150` */
+  width?: string | number;
+};
+
 type BtnClickDialog = {
   options?: DialogOptions;
   index?: number;
@@ -78,10 +113,6 @@ type ButtonProps = {
   plain?: boolean;
   /** 是否为文字按钮，默认 `false` */
   text?: boolean;
-  /** 是否使用`Popconfirm 气泡确认框`进行确认button，默认 `false` */
-  popconfirm?: boolean;
-  /** `Popconfirm`确认框提示信息 */
-  tips?: string;
   /** 是否显示文字按钮背景颜色，默认 `false` */
   bg?: boolean;
   /** 是否为链接按钮，默认 `false` */
@@ -90,6 +121,8 @@ type ButtonProps = {
   round?: boolean;
   /** 是否为圆形按钮，默认 `false` */
   circle?: boolean;
+  /** 确认按钮的 `Popconfirm` 气泡确认框相关配置 */
+  popconfirm?: Popconfirm;
   /** 是否为加载中状态，默认 `false` */
   loading?: boolean;
   /** 自定义加载中状态图标组件 */
@@ -127,6 +160,8 @@ interface DialogOptions extends DialogProps {
   props?: any;
   /** 是否隐藏 `Dialog` 按钮操作区的内容 */
   hideFooter?: boolean;
+  /** 确认按钮的 `Popconfirm` 气泡确认框相关配置 */
+  popconfirm?: Popconfirm;
   /**
    * @description 自定义对话框标题的内容渲染器
    * @see {@link https://element-plus.org/zh-CN/component/dialog.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%A4%B4%E9%83%A8}

src/views/components/dialog/index.vue

@@ -285,36 +285,8 @@ 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>
+    popconfirm: { title: "是否确认修改当前数据" },
+    contentRenderer: () => <p>点击右下方确定按钮看看效果吧</p>
   });
 }