This commit is contained in:
oneao committed 2026-10-09 17:32:14 +08:00
1 parent e99a9fb274
commit 0be0b0767a
788 files changed
+112023 -14941

No files matched your search

@@ -22,6 +22,5 @@ const selectedKeys = ref<string[]>(['design/ui'])
<template>
<div style="max-width: 320px">
<G3Tree v-model:selected-keys="selectedKeys" :tree-data="treeData" default-expand-all />
<p style="margin: 8px 0 0; font-size: 13px; color: #6b7280">选中:{{ selectedKeys.join(', ') || '无' }}</p>
</div>
</template>
@@ -22,15 +22,11 @@ const strict = ref<string[]>(['read'])
<template>
<G3Space :size="32" wrap align="start">
<div style="width: 240px">
<p style="margin: 0 0 8px; font-size: 13px; color: #6b7280">父子联动(半选会回传)</p>
<G3Tree v-model:checked-keys="linked" :tree-data="treeData" checkable default-expand-all block-node />
<p style="margin: 8px 0 0; font-size: 12px">checked: {{ linked }}</p>
</div>
<div style="width: 240px">
<p style="margin: 0 0 8px; font-size: 13px; color: #6b7280">checkStrictly(互不影响)</p>
<G3Tree v-model:checked-keys="strict" :tree-data="treeData" checkable check-strictly default-expand-all block-node />
<p style="margin: 8px 0 0; font-size: 12px">checked: {{ strict }}</p>
</div>
</G3Space>
</template>
@@ -1,6 +1,5 @@
<script setup lang="ts">
// contextMenu:右键节点或空白处弹出菜单;菜单点击通过 contextMenuClick 回传
import { ref } from 'vue'
import { G3Message, G3Tree, type TreeContextMenuItem, type TreeNodeData } from '@g3soft/ui'
import { Copy, Pencil, Trash2 } from '@lucide/vue'
@@ -9,8 +8,6 @@ const treeData: TreeNodeData[] = [
{ key: 'b', title: '文档 B' },
]
const lastAction = ref('暂无')
// 用函数形式:可以按节点动态生成菜单(node 为 null 表示在空白处右键)
function contextMenu(node: TreeNodeData | null): TreeContextMenuItem[] {
if (!node) {
@@ -25,8 +22,7 @@ function contextMenu(node: TreeNodeData | null): TreeContextMenuItem[] {
}
function onMenuClick(info: { item: TreeContextMenuItem; node: TreeNodeData | null }) {
lastAction.value = `${info.node ? info.node.title : '空白处'} → ${info.item.label}`
G3Message.info(lastAction.value)
G3Message.info(`${info.node ? info.node.title : '空白处'} → ${info.item.label}`)
}
</script>
@@ -39,6 +35,5 @@ function onMenuClick(info: { item: TreeContextMenuItem; node: TreeNodeData | nul
block-node
@context-menu-click="onMenuClick"
/>
<p style="margin: 8px 0 0; font-size: 12px; color: #6b7280">{{ lastAction }}</p>
</div>
</template>
@@ -47,7 +47,5 @@ const selectedKeys = ref<string[]>([])
</span>
</template>
</G3Tree>
<p style="margin: 8px 0 0; font-size: 12px; color: #6b7280">选中:{{ selectedKeys.join(', ') || '无' }}</p>
</div>
</template>
@@ -68,6 +68,5 @@ function onDrop(info: { dragKey: string | number; dropKey: string | number; drop
<template>
<div style="max-width: 320px">
<G3Tree :tree-data="treeData" draggable default-expand-all block-node @drop="onDrop" />
<p style="margin: 8px 0 0; font-size: 12px; color: #6b7280">拖拽任意节点试试(子节点不能拖进自己的子树)</p>
</div>
</template>
@@ -25,6 +25,5 @@ async function onLoad(node: TreeNodeData) {
<template>
<div style="max-width: 320px">
<G3Tree v-model:loaded-keys="loadedKeys" :tree-data="treeData" lazy block-node @load="onLoad" />
<p style="margin: 8px 0 0; font-size: 12px; color: #6b7280">已加载:{{ loadedKeys.join(', ') || '无' }}</p>
</div>
</template>