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, closeDrawer,
drawerStore drawerStore
} from "./index"; } from "./index";
import { computed } from "vue"; import { computed, ref } from "vue";
import { isFunction } from "@pureadmin/utils"; import { isFunction } from "@pureadmin/utils";
defineOptions({ defineOptions({
name: "ReDrawer" name: "ReDrawer"
}); });
const sureBtnMap = ref({});
const footerButtons = computed(() => { const footerButtons = computed(() => {
return (options: DrawerOptions) => { return (options: DrawerOptions) => {
return options?.footerButtons?.length > 0 return options?.footerButtons?.length > 0
@ -38,10 +40,26 @@ const footerButtons = computed(() => {
bg: true, bg: true,
popConfirm: options?.popConfirm, popConfirm: options?.popConfirm,
btnClick: ({ drawer: { options, index } }) => { 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" }); closeDrawer(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();
} }
@ -131,6 +149,7 @@ function handleClose(
<el-button <el-button
v-else v-else
v-bind="btn" v-bind="btn"
:loading="key === 1 && sureBtnMap[index]?.loading"
@click=" @click="
btn.btnClick({ btn.btnClick({
drawer: { options, index }, drawer: { options, index },

View File

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