twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-04 07:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: ReDialog组件的确定按钮提供关闭按钮动画closeLoading功能

Browse Source
This commit is contained in:
xiaoxian521 2024-08-05 13:15:10 +08:00
parent 37ab40f188
commit 96152ed134
3 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/ReDialog/index.vue
View File

@ -53,14 +53,17 @@ const footerButtons = computed(() => {
} }
); );
} }
const done = () => { const closeLoading = () => {
if (options?.sureBtnLoading) { if (options?.sureBtnLoading) {
sureBtnMap.value[index].loading = false; sureBtnMap.value[index].loading = false;
} }
};
const done = () => {
closeLoading();
closeDialog(options, index, { command: "sure" }); closeDialog(options, index, { command: "sure" });
}; };
if (options?.beforeSure && isFunction(options?.beforeSure)) { if (options?.beforeSure && isFunction(options?.beforeSure)) {
options.beforeSure(done, { options, index }); options.beforeSure(done, { options, index, closeLoading });
} else { } else {
done(); done();
} }

15
src/components/ReDialog/type.ts
View File

@ -69,11 +69,11 @@ type DialogProps = {
type Popconfirm = { type Popconfirm = {
/** 标题 */ /** 标题 */
title?: string; title?: string;
/** 确认按钮文字 */ /** 确定按钮文字 */
confirmButtonText?: string; confirmButtonText?: string;
/** 取消按钮文字 */ /** 取消按钮文字 */
cancelButtonText?: string; cancelButtonText?: string;
/** 确认按钮类型，默认 `primary` */ /** 确定按钮类型，默认 `primary` */
confirmButtonType?: ButtonType; confirmButtonType?: ButtonType;
/** 取消按钮类型，默认 `text` */ /** 取消按钮类型，默认 `text` */
cancelButtonType?: ButtonType; cancelButtonType?: ButtonType;
@ -121,7 +121,7 @@ type ButtonProps = {
round?: boolean; round?: boolean;
/** 是否为圆形按钮，默认 `false` */ /** 是否为圆形按钮，默认 `false` */
circle?: boolean; circle?: boolean;
/** 确认按钮的 `Popconfirm` 气泡确认框相关配置 */ /** 确定按钮的 `Popconfirm` 气泡确认框相关配置 */
popconfirm?: Popconfirm; popconfirm?: Popconfirm;
/** 是否为加载中状态，默认 `false` */ /** 是否为加载中状态，默认 `false` */
loading?: boolean; loading?: boolean;
@ -160,9 +160,9 @@ interface DialogOptions extends DialogProps {
props?: any; props?: any;
/** 是否隐藏 `Dialog` 按钮操作区的内容 */ /** 是否隐藏 `Dialog` 按钮操作区的内容 */
hideFooter?: boolean; hideFooter?: boolean;
/** 确认按钮的 `Popconfirm` 气泡确认框相关配置 */ /** 确定按钮的 `Popconfirm` 气泡确认框相关配置 */
popconfirm?: Popconfirm; popconfirm?: Popconfirm;
/** 点击确认按钮后是否开启 `loading` 加载动画 */ /** 点击确定按钮后是否开启 `loading` 加载动画 */
sureBtnLoading?: boolean; sureBtnLoading?: boolean;
/** /**
* @description 自定义对话框标题的内容渲染器 * @description 自定义对话框标题的内容渲染器
@ -261,10 +261,13 @@ interface DialogOptions extends DialogProps {
done: Function, done: Function,
{ {
options, options,
index index,
closeLoading
}: { }: {
options: DialogOptions; options: DialogOptions;
index: number; index: number;
/** 关闭确定按钮的 `loading` 加载动画 */
closeLoading: Function;
} }
) => void; ) => void;
} }

4
src/views/components/dialog/index.vue
View File

@ -456,7 +456,9 @@ function onSureBtnLoading() {
sureBtnLoading: true, sureBtnLoading: true,
title: "点击底部确定按钮可开启按钮动画", title: "点击底部确定按钮可开启按钮动画",
contentRenderer: () => <p>弹框内容-点击底部确定按钮可开启按钮动画</p>, contentRenderer: () => <p>弹框内容-点击底部确定按钮可开启按钮动画</p>,
beforeSure: done => { beforeSure: (done, { closeLoading }) => {
// closeLoading() // 关闭确定按钮动画，不关闭弹框
// done() // 关闭确定按钮动画并关闭弹框
setTimeout(() => done(), 800); setTimeout(() => done(), 800);
} }
}); });