fix: alert action button focus, fixed #5921 (#5922)

* 修复Alert组件的按钮焦点切换问题
pull/73/head
Netfan 2025-04-12 00:59:56 +08:00 committed by YunaiV
parent ec649cda2d
commit eedbd23dce
2 changed files with 7 additions and 3 deletions

View File

@ -138,7 +138,7 @@ async function handleOpenChange(val: boolean) {
<div class="flex items-center">
<component :is="getIconRender" class="mr-2" />
<span class="flex-auto">{{ $t(title) }}</span>
<AlertDialogCancel v-if="showCancel">
<AlertDialogCancel v-if="showCancel" as-child>
<VbenButton
variant="ghost"
size="icon"
@ -158,16 +158,17 @@ async function handleOpenChange(val: boolean) {
<VbenLoading v-if="loading && contentMasking" :spinning="loading" />
</AlertDialogDescription>
<div class="flex justify-end gap-x-2" :class="`justify-${buttonAlign}`">
<AlertDialogCancel v-if="showCancel" :disabled="loading">
<AlertDialogCancel v-if="showCancel" as-child>
<component
:is="components.DefaultButton || VbenButton"
:disabled="loading"
variant="ghost"
@click="handleCancel"
>
{{ cancelText || $t('cancel') }}
</component>
</AlertDialogCancel>
<AlertDialogAction>
<AlertDialogAction as-child>
<component
:is="components.PrimaryButton || VbenButton"
:loading="loading"

View File

@ -261,6 +261,9 @@ async function openPrompt() {
</template>
</Card>
<Card class="w-[300px]" title="轻量提示弹窗">
<template #extra>
<DocButton path="/components/common-ui/vben-alert" />
</template>
<p>通过快捷方法创建动态提示弹窗适合一些轻量的提示和确认输入等</p>
<template #actions>
<Button type="primary" @click="openAlert">Alert</Button>