diff --git a/docs/src/components/common-ui/vben-modal.md b/docs/src/components/common-ui/vben-modal.md index c795b9de..75f620ae 100644 --- 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 index 005949e4..cf54dcec 100644 --- 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 index a824b98a..4e0dd6de 100644 --- 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 index 9bacb396..0e2b2ed4 100644 --- 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) { diff --git a/playground/src/views/examples/modal/auto-height-demo.vue b/playground/src/views/examples/modal/auto-height-demo.vue index 172289ce..28939a62 100644 --- 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); }