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
*/
drawerLoading(loading: boolean) {
this.setState({ confirmLoading: loading, loading });
this.setState({ confirmDisabled: loading, loading });
}
getData<T extends object = Record<string, any>>() {

View File

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

View File

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

View File

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