fix: 组件ReDrawer 增加按钮loading等功能

This commit is contained in:
liaohui 2024-09-03 11:38:11 +08:00
parent 99d67ed1f7
commit 58ca706846
2 changed files with 29 additions and 4 deletions

View File

@ -6,12 +6,14 @@ import {
closeDrawer,
drawerStore
} from "./index";
import { computed } from "vue";
import { computed, ref } from "vue";
import { isFunction } from "@pureadmin/utils";
defineOptions({
name: "ReDrawer"
});
const sureBtnMap = ref({});
const footerButtons = computed(() => {
return (options: DrawerOptions) => {
return options?.footerButtons?.length > 0
@ -38,10 +40,26 @@ const footerButtons = computed(() => {
bg: true,
popConfirm: options?.popConfirm,
btnClick: ({ drawer: { options, index } }) => {
const done = () =>
if (options?.sureBtnLoading) {
sureBtnMap.value[index] = Object.assign(
{},
sureBtnMap.value[index],
{
loading: true
}
);
}
const closeLoading = () => {
if (options?.sureBtnLoading) {
sureBtnMap.value[index].loading = false;
}
};
const done = () => {
closeLoading();
closeDrawer(options, index, { command: "sure" });
};
if (options?.beforeSure && isFunction(options?.beforeSure)) {
options.beforeSure(done, { options, index });
options.beforeSure(done, { options, index, closeLoading });
} else {
done();
}
@ -131,6 +149,7 @@ function handleClose(
<el-button
v-else
v-bind="btn"
:loading="key === 1 && sureBtnMap[index]?.loading"
@click="
btn.btnClick({
drawer: { options, index },

View File

@ -30,6 +30,8 @@ type DrawerProps = {
closeOnClickModal?: boolean;
/** 是否可以通过按下 ESC 关闭 Drawer ,默认 `true` */
closeOnPressEscape?: boolean;
/** 是否显示关闭按钮,默认 `true` */
showClose?: boolean;
/** `Drawer` 打开的延时时间,单位毫秒,默认 `0` */
openDelay?: number;
/** `Drawer` 关闭的延时时间,单位毫秒,默认 `0` */
@ -153,6 +155,8 @@ interface DrawerOptions extends DrawerProps {
hideFooter?: boolean;
/** 确认按钮的 `PopConfirm` 气泡确认框相关配置 */
popConfirm?: PopConfirm;
/** 点击确定按钮后是否开启 `loading` 加载动画 */
sureBtnLoading?: boolean;
/**
* @description
* @see {@link https://element-plus.org/zh-CN/component/drawer.html#%E6%8F%92%E6%A7%BD}
@ -243,10 +247,12 @@ interface DrawerOptions extends DrawerProps {
done: Function,
{
options,
index
index,
closeLoading
}: {
options: DrawerOptions;
index: number;
closeLoading: Function;
}
) => void;
}