feat: add confirmDisabled for Dialog

vbenjs · Nov 27, 2024 · 9d12cf4 · 9d12cf4
1 parent f85badf
commit 9d12cf4
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 3 deletions.
diff --git a/docs/src/components/common-ui/vben-modal.md b/docs/src/components/common-ui/vben-modal.md
@@ -93,13 +93,14 @@ const [Modal, modalApi] = useVbenModal({
 | modal | 显示遮罩 | `boolean` | `true` |
 | header | 显示header | `boolean` | `true` |
 | footer | 显示footer | `boolean\|slot` | `true` |
+| confirmDisabled | 禁用确认按钮 | `boolean` | `false` |
 | confirmLoading | 确认按钮loading状态 | `boolean` | `false` |
 | closeOnClickModal | 点击遮罩关闭弹窗 | `boolean` | `true` |
 | closeOnPressEscape | esc 关闭弹窗 | `boolean` | `true` |
 | confirmText | 确认按钮文本 | `string\|slot` | `确认` |
 | cancelText | 取消按钮文本 | `string\|slot` | `取消` |
 | showCancelButton | 显示取消按钮 | `boolean` | `true` |
-| showConfirmButton | 显示确认按钮文本 | `boolean` | `true` |
+| showConfirmButton | 显示确认按钮 | `boolean` | `true` |
 | class | modal的class，宽度通过这个配置 | `string` | - |
 | contentClass | modal内容区域的class | `string` | - |
 | footerClass | modal底部区域的class | `string` | - |

diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts b/packages/@core/ui-kit/popup-ui/src/modal/modal-api.ts
@@ -41,6 +41,7 @@ export class ModalApi {
       class: '',
       closeOnClickModal: true,
       closeOnPressEscape: true,
+      confirmDisabled: false,
       confirmLoading: false,
       contentClass: '',
       draggable: false,

diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal.ts b/packages/@core/ui-kit/popup-ui/src/modal/modal.ts
@@ -35,6 +35,10 @@ export interface ModalProps {
    * @default true
    */
   closeOnPressEscape?: boolean;
+  /**
+   * 禁用确认按钮
+   */
+  confirmDisabled?: boolean;
   /**
    * 确定按钮 loading
    * @default false

diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
@@ -59,6 +59,7 @@ const {
   closable,
   closeOnClickModal,
   closeOnPressEscape,
+  confirmDisabled,
   confirmLoading,
   confirmText,
   contentClass,
@@ -285,6 +286,7 @@ function handleFocusOutside(e: Event) {
           <component
             :is="components.PrimaryButton || VbenButton"
             v-if="showConfirmButton"
+            :disabled="confirmDisabled"
             :loading="confirmLoading"
             @click="() => modalApi?.onConfirm()"
           >

diff --git a/playground/src/views/examples/modal/auto-height-demo.vue b/playground/src/views/examples/modal/auto-height-demo.vue
@@ -22,10 +22,10 @@ const [Modal, modalApi] = useVbenModal({
 });
 
 function handleUpdate(len: number) {
-  modalApi.setState({ loading: true });
+  modalApi.setState({ confirmDisabled: true, loading: true });
   setTimeout(() => {
     list.value = Array.from({ length: len }, (_v, k) => k + 1);
-    modalApi.setState({ loading: false });
+    modalApi.setState({ confirmDisabled: false, loading: false });
   }, 2000);
 }
 </script>