by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
* 修复Alert组件的按钮焦点切换问题
This commit is contained in:
Netfan 2025-04-12 00:59:56 +08:00 committed by GitHub
parent 86da3cedc2
commit 9bd5a190c2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/@core/ui-kit/popup-ui/src/alert/alert.vue
View File

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

3
playground/src/views/examples/modal/index.vue
View File

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