mirror of
https://gitee.com/dapppp/ruoyi-plus-vben5.git
synced 2026-03-14 05:00:52 +08:00
feat(popup-ui): 为抽屉和模态框添加确认按钮禁用状态
在 DrawerProps 接口中新增 confirmDisabled 属性,并在 drawer.vue 模板中绑定到确认按钮。 同时修改 modal-api.ts 和 drawer-api.ts 中的 modalLoading/drawerLoading 方法, 使其在 loading 时自动禁用确认按钮,防止用户在异步操作期间重复提交。
This commit is contained in:
@@ -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>>() {
|
||||
|
||||
@@ -38,6 +38,10 @@ export interface DrawerProps {
|
||||
* @default true
|
||||
*/
|
||||
closeOnPressEscape?: boolean;
|
||||
/**
|
||||
* 禁用确认按钮
|
||||
*/
|
||||
confirmDisabled?: boolean;
|
||||
/**
|
||||
* 确定按钮 loading
|
||||
* @default false
|
||||
|
||||
@@ -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()"
|
||||
>
|
||||
|
||||
@@ -131,7 +131,7 @@ export class ModalApi {
|
||||
* @param loading 是否loading
|
||||
*/
|
||||
modalLoading(loading: boolean) {
|
||||
this.setState({ confirmLoading: loading, loading });
|
||||
this.setState({ confirmDisabled: loading, loading });
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user