diff --git a/src/components/ReDialog/index.vue b/src/components/ReDialog/index.vue index e7fb2f108..1ca02d6e5 100644 --- a/src/components/ReDialog/index.vue +++ b/src/components/ReDialog/index.vue @@ -149,19 +149,34 @@ function handleClose( - - {{ btn?.label }} - + diff --git a/src/components/ReDialog/type.ts b/src/components/ReDialog/type.ts index 827e8c7df..04203f758 100644 --- a/src/components/ReDialog/type.ts +++ b/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` */ diff --git a/src/views/components/dialog/index.vue b/src/views/components/dialog/index.vue index 1a3be82b1..9d85ea7ed 100644 --- a/src/views/components/dialog/index.vue +++ b/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: () =>

这是`Popconfirm`确认框示例

+ }); +} + // 结合Form表单(第一种方式,弹框关闭立刻恢复初始值)通过 props 属性接收子组件的 prop 并赋值 function onFormOneClick() { addDialog({ @@ -496,6 +534,7 @@ function onBeforeSureClick() { 关闭后的回调 嵌套的弹框 更改弹框自身属性值 + popconfirm确认框