u

code/g3soft-libs/docs/examples/dropdown/header-slot.vue

@@ -0,0 +1,56 @@
+<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>