Browse Source

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

* 修复Alert组件的按钮焦点切换问题
pull/5923/head
Netfan 10 months ago
committed by GitHub
parent
commit
9bd5a190c2
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
  1. 7
      packages/@core/ui-kit/popup-ui/src/alert/alert.vue
  2. 3
      playground/src/views/examples/modal/index.vue

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

@ -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"

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

@ -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>

Loading…
Cancel
Save