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

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

View File

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

View File

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

View File

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