diff --git a/docs/src/components/common-ui/vben-alert.md b/docs/src/components/common-ui/vben-alert.md index aac6c237..6a477e31 100644 --- a/docs/src/components/common-ui/vben-alert.md +++ b/docs/src/components/common-ui/vben-alert.md @@ -38,9 +38,16 @@ Alert提供的功能与Modal类似,但只适用于简单应用场景。例如 /** 预置的图标类型 */ export type IconType = 'error' | 'info' | 'question' | 'success' | 'warning'; +export type BeforeCloseScope = { + /** 是否为点击确认按钮触发的关闭 */ + isConfirm: boolean; +}; + export type AlertProps = { /** 关闭前的回调,如果返回false,则终止关闭 */ - beforeClose?: () => boolean | Promise | undefined; + beforeClose?: ( + scope: BeforeCloseScope, + ) => boolean | Promise | undefined; /** 边框 */ bordered?: boolean; /** 取消按钮的标题 */ @@ -81,7 +88,7 @@ export function alert( /** * 弹出输入框的函数签名。 - * 参数beforeClose会传入用户当前输入的值 + * beforeClose的参数会传入用户当前输入的值 * component指定接受用户输入的组件,默认为Input * componentProps 为输入组件设置的属性数据 * defaultValue 默认的值 @@ -90,7 +97,10 @@ export function alert( export async function prompt( options: Omit & { beforeClose?: ( - val: T, + scope: BeforeCloseScope & { + /** 输入组件的当前值 */ + value: T; + }, ) => boolean | Promise | undefined; component?: Component; componentProps?: Recordable; diff --git a/packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts b/packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts index 71e7d9db..d022d1cd 100644 --- a/packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts +++ b/packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts @@ -2,7 +2,7 @@ import type { Component } from 'vue'; import type { Recordable } from '@vben-core/typings'; -import type { AlertProps } from './alert'; +import type { AlertProps, BeforeCloseScope } from './alert'; import { h, ref, render } from 'vue'; @@ -131,9 +131,10 @@ export function vbenConfirm( export async function vbenPrompt( options: Omit & { - beforeClose?: ( - val: T, - ) => boolean | Promise | undefined; + beforeClose?: (scope: { + isConfirm: boolean; + value: T | undefined; + }) => boolean | Promise | undefined; component?: Component; componentProps?: Recordable; defaultValue?: T; @@ -165,9 +166,12 @@ export async function vbenPrompt( contents.push(componentRef); const props: AlertProps & Recordable = { ...delegated, - async beforeClose() { + async beforeClose(scope: BeforeCloseScope) { if (delegated.beforeClose) { - return await delegated.beforeClose(modelValue.value); + return await delegated.beforeClose({ + ...scope, + value: modelValue.value, + }); } }, content: h( diff --git a/packages/@core/ui-kit/popup-ui/src/alert/alert.ts b/packages/@core/ui-kit/popup-ui/src/alert/alert.ts index 97002f70..6a574daa 100644 --- a/packages/@core/ui-kit/popup-ui/src/alert/alert.ts +++ b/packages/@core/ui-kit/popup-ui/src/alert/alert.ts @@ -2,9 +2,15 @@ import type { Component } from 'vue'; export type IconType = 'error' | 'info' | 'question' | 'success' | 'warning'; +export type BeforeCloseScope = { + isConfirm: boolean; +}; + export type AlertProps = { /** 关闭前的回调,如果返回false,则终止关闭 */ - beforeClose?: () => boolean | Promise | undefined; + beforeClose?: ( + scope: BeforeCloseScope, + ) => boolean | Promise | undefined; /** 边框 */ bordered?: boolean; /** 取消按钮的标题 */ diff --git a/packages/@core/ui-kit/popup-ui/src/alert/alert.vue b/packages/@core/ui-kit/popup-ui/src/alert/alert.vue index 7cc54ff5..2cd334b7 100644 --- a/packages/@core/ui-kit/popup-ui/src/alert/alert.vue +++ b/packages/@core/ui-kit/popup-ui/src/alert/alert.vue @@ -92,15 +92,17 @@ function handleConfirm() { isConfirm.value = true; emits('confirm'); } + function handleCancel() { - open.value = false; + isConfirm.value = false; } + const loading = ref(false); async function handleOpenChange(val: boolean) { if (!val && props.beforeClose) { loading.value = true; try { - const res = await props.beforeClose(); + const res = await props.beforeClose({ isConfirm: isConfirm.value }); if (res !== false) { open.value = false; } @@ -141,6 +143,7 @@ async function handleOpenChange(val: boolean) { size="icon" class="rounded-full" :disabled="loading" + @click="handleCancel" > @@ -154,22 +157,20 @@ async function handleOpenChange(val: boolean) {
- + {{ cancelText || $t('cancel') }} - + {{ confirmText || $t('confirm') }} diff --git a/playground/src/views/examples/modal/index.vue b/playground/src/views/examples/modal/index.vue index 23cfab12..5674843e 100644 --- a/playground/src/views/examples/modal/index.vue +++ b/playground/src/views/examples/modal/index.vue @@ -129,7 +129,8 @@ onBeforeUnmount(() => { function openConfirm() { confirm({ - beforeClose() { + beforeClose({ isConfirm }) { + if (!isConfirm) return; // 这里可以做一些异步操作 return new Promise((resolve) => { setTimeout(() => { @@ -150,8 +151,8 @@ function openConfirm() { async function openPrompt() { prompt({ - async beforeClose(val) { - if (val === '芝士') { + async beforeClose({ isConfirm, value }) { + if (isConfirm && value === '芝士') { message.error('不能吃芝士'); return false; }