u
This commit is contained in:
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>
|
||||
Reference in new issue
Block a user