| | |
|---|
| | | * 文本 |
|---|
| | | */ |
|---|
| | | text?: string; |
|---|
| | | /** Display the account name beside the avatar in a portal toolbar. */ |
|---|
| | | showText?: boolean; |
|---|
| | | /** 触发方式 */ |
|---|
| | | trigger?: 'both' | 'click' | 'hover'; |
|---|
| | | /** hover触发时，延迟响应的时间 */ |
|---|
| | |
|---|
| | | showShortcutKey: true, |
|---|
| | | tagText: '', |
|---|
| | | text: '', |
|---|
| | | showText: false, |
|---|
| | | trigger: 'click', |
|---|
| | | hoverDelay: 500, |
|---|
| | | }); |
|---|
| | |
|---|
| | | /> |
|---|
| | | |
|---|
| | | <DropdownMenu v-model:open="openPopover"> |
|---|
| | | <DropdownMenuTrigger ref="refTrigger" :disabled="props.trigger === 'hover'"> |
|---|
| | | <div class="mr-2 ml-1 cursor-pointer rounded-full p-1.5 hover:bg-accent"> |
|---|
| | | <DropdownMenuTrigger ref="refTrigger" :disabled="props.trigger === 'hover'" :aria-label="`账号菜单：${text || tagText || '当前用户'}`"> |
|---|
| | | <div class="mr-2 ml-1 cursor-pointer rounded-full p-1.5 hover:bg-accent" :class="{ 'portal-account-trigger': showText }"> |
|---|
| | | <div class="flex-center hover:text-accent-foreground"> |
|---|
| | | <VbenAvatar :alt="text" :src="avatar" class="size-8" dot /> |
|---|
| | | </div> |
|---|
| | | <span v-if="showText" class="portal-account-name">{{ text || tagText || '我的账号' }}</span><span v-if="showText" class="portal-account-chevron" aria-hidden="true">⌄</span> |
|---|
| | | </div> |
|---|
| | | </DropdownMenuTrigger> |
|---|
| | | <DropdownMenuContent class="mr-2 min-w-60 p-0 pb-1"> |
|---|
| | |
|---|
| | | </DropdownMenuContent> |
|---|
| | | </DropdownMenu> |
|---|
| | | </template> |
|---|
| | | <style scoped> |
|---|
| | | .portal-account-trigger { display: flex; height: 28px; align-items: center; gap: 7px; padding: 2px 7px; border-radius: 4px; }.portal-account-trigger :deep(.size-8) { width: 22px; height: 22px; }.portal-account-name { max-width: 110px; overflow: hidden; color: var(--portal-ink, currentColor); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.portal-account-chevron { color: #4b6d8b; font-size: 14px; }@media(max-width:767px) { .portal-account-name { max-width: 68px; }.portal-account-trigger { gap: 5px; } } |
|---|
| | | </style> |
|---|
