u
This commit is contained in:
oneao committed
1 parent
f572dce2f6
commit
e99a9fb274
356 files changed
+28877
-1055
No files matched your search
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
// 最常用：items 传数组，点击项通过 click 事件回传 { key, item }
|
||||
import { G3Button, G3Dropdown, G3Message } from '@g3soft/ui'
|
||||
|
||||
const items = [
|
||||
{ key: 'edit', label: '编辑' },
|
||||
{ key: 'copy', label: '复制' },
|
||||
{ divider: true },
|
||||
{ key: 'delete', label: '删除', danger: true },
|
||||
]
|
||||
|
||||
function onClick(payload: { key?: string | number }) {
|
||||
G3Message.info(`点击了 ${String(payload.key)}`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<G3Dropdown :items="items" @click="onClick">
|
||||
<G3Button type="outline">操作</G3Button>
|
||||
</G3Dropdown>
|
||||
</template>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,33 @@
|
||||
<script setup lang="ts">
|
||||
// 每一项都支持：分组标签、快捷键提示、禁用、危险色、子菜单
|
||||
import { G3Button, G3Dropdown } from '@g3soft/ui'
|
||||
import { Download, Share2, Upload } from '@lucide/vue'
|
||||
|
||||
const items = [
|
||||
{ type: 'label', label: '文件操作' },
|
||||
{ key: 'new', label: '新建', shortcut: '⌘ N' },
|
||||
{ key: 'open', label: '打开', shortcut: '⌘ O' },
|
||||
{ divider: true },
|
||||
{ type: 'label', label: '导出' },
|
||||
{
|
||||
key: 'export',
|
||||
label: '导出为',
|
||||
icon: Download,
|
||||
children: [
|
||||
{ key: 'pdf', label: 'PDF' },
|
||||
{ key: 'excel', label: 'Excel' },
|
||||
{ key: 'csv', label: 'CSV', disabled: true },
|
||||
],
|
||||
},
|
||||
{ key: 'upload', label: '上传替换', icon: Upload },
|
||||
{ key: 'share', label: '分享给他人', icon: Share2, disabled: true },
|
||||
{ divider: true },
|
||||
{ key: 'delete', label: '彻底删除', danger: true },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<G3Dropdown :items="items">
|
||||
<G3Button type="outline">完整菜单</G3Button>
|
||||
</G3Dropdown>
|
||||
</template>
|
||||
@@ -0,0 +1,27 @@
|
||||
<script setup lang="ts">
|
||||
// 键盘：点击触发器后 ↑↓ 移动、Home/End 跳首尾、Enter 选中、Esc 关闭
|
||||
import { ref } from 'vue'
|
||||
import { G3Button, G3Dropdown, G3Message } from '@g3soft/ui'
|
||||
|
||||
const open = ref(false)
|
||||
|
||||
const items = [
|
||||
{ key: 'view', label: '查看详情' },
|
||||
{ key: 'download', label: '下载' },
|
||||
{ key: 'rename', label: '重命名' },
|
||||
{ key: 'move', label: '移动到…' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="display: flex; align-items: center; gap: 12px">
|
||||
<G3Dropdown v-model:open="open" :items="items" placement="bottom-start">
|
||||
<template #trigger>
|
||||
<G3Button type="outline">按键盘操作</G3Button>
|
||||
</template>
|
||||
</G3Dropdown>
|
||||
<span style="font-size: 12px; color: #6b7280">
|
||||
菜单打开后按 ↑↓ / Enter 试试（当前 {{ open ? '已打开' : '已关闭' }}）
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
// trigger：click（默认）/ hover（下拉菜单栏）/ contextmenu（右键，常用于表格行 / 树节点）
|
||||
import { G3Button, G3Dropdown, G3Space } from '@g3soft/ui'
|
||||
|
||||
const items = [
|
||||
{ key: 'open', label: '打开' },
|
||||
{ key: 'rename', label: '重命名' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<G3Space :size="[16, 12]" align="center" wrap>
|
||||
<G3Dropdown :items="items" trigger="hover">
|
||||
<G3Button type="outline">hover 触发</G3Button>
|
||||
</G3Dropdown>
|
||||
|
||||
<G3Dropdown :items="items" trigger="contextmenu" :offset="2">
|
||||
<div style="padding: 10px 20px; border: 1px dashed #d9d9d9; border-radius: 6px">
|
||||
在此处右键
|
||||
</div>
|
||||
</G3Dropdown>
|
||||
</G3Space>
|
||||
</template>
|
||||
Reference in new issue
Block a user