u

code/g3soft-libs/docs/examples/dropdown/declarative.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+// 声明式：默认插槽里写 G3DropdownItem（不渲染 DOM，只作为数据载体被收集）
+import { G3Button, G3Dropdown, G3DropdownItem, G3Message } from '@g3soft/ui'
+import { Copy, Pencil, Trash2 } from '@lucide/vue'
+</script>
+
+<template>
+  <G3Dropdown @click="(payload: { key?: string | number }) => G3Message.info(String(payload.key))">
+    <!-- #trigger 显式指定触发器，避免和菜单项混在默认插槽里 -->
+    <template #trigger>
+      <G3Button type="outline">声明式菜单</G3Button>
+    </template>
+
+    <G3DropdownItem item-key="edit" label="编辑" :icon="Pencil" />
+    <G3DropdownItem item-key="copy" label="复制" :icon="Copy" />
+    <G3DropdownItem divider />
+    <G3DropdownItem item-key="delete" label="删除" :icon="Trash2" danger />
+  </G3Dropdown>
+</template>