feat(popup-ui): 为抽屉和模态框添加确认按钮禁用状态

在 DrawerProps 接口中新增 confirmDisabled 属性,并在 drawer.vue 模板中绑定到确认按钮。
同时修改 modal-api.ts 和 drawer-api.ts 中的 modalLoading/drawerLoading 方法,
使其在 loading 时自动禁用确认按钮,防止用户在异步操作期间重复提交。
This commit is contained in:
dap
2026-01-26 18:45:06 +08:00
parent 682dc9a5d6
commit 09b147195a
4 changed files with 8 additions and 2 deletions

View File

@@ -109,7 +109,7 @@ export class DrawerApi {
* @param loading 是否loading * @param loading 是否loading
*/ */
drawerLoading(loading: boolean) { drawerLoading(loading: boolean) {
this.setState({ confirmLoading: loading, loading }); this.setState({ confirmDisabled: loading, loading });
} }
getData<T extends object = Record<string, any>>() { getData<T extends object = Record<string, any>>() {

View File

@@ -38,6 +38,10 @@ export interface DrawerProps {
* @default true * @default true
*/ */
closeOnPressEscape?: boolean; closeOnPressEscape?: boolean;
/**
* 禁用确认按钮
*/
confirmDisabled?: boolean;
/** /**
* 确定按钮 loading * 确定按钮 loading
* @default false * @default false

View File

@@ -68,6 +68,7 @@ const {
closeIconPlacement, closeIconPlacement,
closeOnClickModal, closeOnClickModal,
closeOnPressEscape, closeOnPressEscape,
confirmDisabled,
confirmLoading, confirmLoading,
confirmText, confirmText,
contentClass, contentClass,
@@ -317,6 +318,7 @@ const getForceMount = computed(() => {
<component <component
:is="components.PrimaryButton || VbenButton" :is="components.PrimaryButton || VbenButton"
v-if="showConfirmButton" v-if="showConfirmButton"
:disabled="confirmDisabled"
:loading="confirmLoading || submitting" :loading="confirmLoading || submitting"
@click="() => drawerApi?.onConfirm()" @click="() => drawerApi?.onConfirm()"
> >

View File

@@ -131,7 +131,7 @@ export class ModalApi {
* @param loading 是否loading * @param loading 是否loading
*/ */
modalLoading(loading: boolean) { modalLoading(loading: boolean) {
this.setState({ confirmLoading: loading, loading }); this.setState({ confirmDisabled: loading, loading });
} }
/** /**