fix: alert animation (#5927)

This commit is contained in:
Netfan 2025-04-12 10:37:47 +08:00 committed by GitHub
parent 36bf6fc149
commit 4a2c7b313f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 29 additions and 13 deletions

View File

@ -36,6 +36,10 @@ export type AlertProps = {
contentMasking?: boolean; contentMasking?: boolean;
/** 弹窗的图标(在标题的前面) */ /** 弹窗的图标(在标题的前面) */
icon?: Component | IconType; icon?: Component | IconType;
/**
*
*/
overlayBlur?: number;
/** 是否显示取消按钮 */ /** 是否显示取消按钮 */
showCancel?: boolean; showCancel?: boolean;
/** 弹窗标题 */ /** 弹窗标题 */

View File

@ -3,7 +3,7 @@ import type { Component } from 'vue';
import type { AlertProps } from './alert'; import type { AlertProps } from './alert';
import { computed, h, nextTick, ref, watch } from 'vue'; import { computed, h, nextTick, ref } from 'vue';
import { useSimpleLocale } from '@vben-core/composables'; import { useSimpleLocale } from '@vben-core/composables';
import { import {
@ -39,14 +39,12 @@ const open = defineModel<boolean>('open', { default: false });
const { $t } = useSimpleLocale(); const { $t } = useSimpleLocale();
const components = globalShareState.getComponents(); const components = globalShareState.getComponents();
const isConfirm = ref(false); const isConfirm = ref(false);
watch(open, async (val) => {
await nextTick(); function onAlertClosed() {
if (val) { emits('closed', isConfirm.value);
isConfirm.value = false; isConfirm.value = false;
} else { }
emits('closed', isConfirm.value);
}
});
const getIconRender = computed(() => { const getIconRender = computed(() => {
let iconRender: Component | null = null; let iconRender: Component | null = null;
if (props.icon) { if (props.icon) {
@ -100,6 +98,7 @@ function handleCancel() {
const loading = ref(false); const loading = ref(false);
async function handleOpenChange(val: boolean) { async function handleOpenChange(val: boolean) {
await nextTick();
if (!val && props.beforeClose) { if (!val && props.beforeClose) {
loading.value = true; loading.value = true;
try { try {
@ -120,15 +119,16 @@ async function handleOpenChange(val: boolean) {
<AlertDialogContent <AlertDialogContent
:open="open" :open="open"
:centered="centered" :centered="centered"
:overlay-blur="overlayBlur"
@opened="emits('opened')" @opened="emits('opened')"
@closed="onAlertClosed"
:class=" :class="
cn( cn(
containerClass, containerClass,
'left-0 right-0 top-[10vh] mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:rounded-[var(--radius)] md:w-[520px] md:max-w-[80%]', 'left-0 right-0 mx-auto flex max-h-[80%] flex-col p-0 duration-300 sm:rounded-[var(--radius)] md:w-[520px] md:max-w-[80%]',
{ {
'border-border border': bordered, 'border-border border': bordered,
'shadow-3xl': !bordered, 'shadow-3xl': !bordered,
'top-1/2 !-translate-y-1/2': centered,
}, },
) )
" "

View File

@ -61,7 +61,7 @@ defineExpose({
<template> <template>
<AlertDialogPortal> <AlertDialogPortal>
<Transition name="fade"> <Transition name="fade" appear>
<AlertDialogOverlay <AlertDialogOverlay
v-if="open && modal" v-if="open && modal"
:style="{ :style="{
@ -80,7 +80,17 @@ defineExpose({
v-bind="forwarded" v-bind="forwarded"
:class=" :class="
cn( cn(
'z-popup bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%] w-full p-6 shadow-lg outline-none sm:rounded-xl', 'z-popup bg-background w-full p-6 shadow-lg outline-none sm:rounded-xl',
'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
{
'data-[state=open]:slide-in-from-top-[48%] data-[state=closed]:slide-out-to-top-[48%]':
!centered,
'data-[state=open]:slide-in-from-top-[98%] data-[state=closed]:slide-out-to-top-[148%]':
centered,
'top-[10vh]': !centered,
'top-1/2 -translate-y-1/2': centered,
},
props.class, props.class,
) )
" "

View File

@ -138,6 +138,7 @@ function openConfirm() {
}, 1000); }, 1000);
}); });
}, },
centered: false,
content: '这是一个确认弹窗', content: '这是一个确认弹窗',
icon: 'question', icon: 'question',
}) })
@ -160,6 +161,7 @@ async function openPrompt() {
componentProps: { placeholder: '不能吃芝士...' }, componentProps: { placeholder: '不能吃芝士...' },
content: '中午吃了什么?', content: '中午吃了什么?',
icon: 'question', icon: 'question',
overlayBlur: 3,
}) })
.then((res) => { .then((res) => {
message.success(`用户输入了:${res}`); message.success(`用户输入了:${res}`);