57 lines
1.9 KiB
Vue
57 lines
1.9 KiB
Vue
<script setup lang="ts">
|
||
// #header 放账号卡片之类的富头部；#menu 是完全自定义菜单的逃生舱
|
||
import { G3Button, G3Dropdown, G3DropdownItem, G3Space } from '@g3soft/ui'
|
||
import { LogOut, Settings, User } from '@lucide/vue'
|
||
</script>
|
||
|
||
<template>
|
||
<G3Space :size="16" wrap>
|
||
<G3Dropdown placement="bottom-end">
|
||
<template #trigger>
|
||
<G3Button type="outline">带头部的菜单</G3Button>
|
||
</template>
|
||
|
||
<!-- 头部：不参与键盘导航 -->
|
||
<template #header>
|
||
<div style="display: flex; gap: 8px; align-items: center">
|
||
<div
|
||
style="
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
background: rgba(24, 24, 27, 0.08);
|
||
display: grid;
|
||
place-items: center;
|
||
font-size: 12px;
|
||
"
|
||
>
|
||
ZS
|
||
</div>
|
||
<div>
|
||
<div style="font-size: 13px; font-weight: 600">张三</div>
|
||
<div style="font-size: 12px; color: #6b7280">zhangsan@g3soft.dev</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<G3DropdownItem item-key="profile" label="个人资料" :icon="User" />
|
||
<G3DropdownItem item-key="settings" label="账号设置" :icon="Settings" />
|
||
<G3DropdownItem divider />
|
||
<G3DropdownItem item-key="logout" label="退出登录" :icon="LogOut" danger />
|
||
</G3Dropdown>
|
||
|
||
<!-- #menu 逃生舱：菜单结构完全自定义时使用 -->
|
||
<G3Dropdown trigger="click">
|
||
<template #trigger>
|
||
<G3Button type="ghost">#menu 逃生舱</G3Button>
|
||
</template>
|
||
<template #menu="{ close }">
|
||
<div style="padding: 8px; font-size: 13px">
|
||
这里可以放任意结构
|
||
<G3Button size="small" type="link" @click="close()">关闭</G3Button>
|
||
</div>
|
||
</template>
|
||
</G3Dropdown>
|
||
</G3Space>
|
||
</template>
|