mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-02 03:08:21 +08:00
feat(components): [tree-v2] support node-drop event (#16935)
* Update tree.vue * Update tree-node.vue * Update tree.vue * Update virtual-tree.ts * Update useTree.ts * Update virtual-tree.ts * Update tree.test.ts * Update useTree.ts * Update tree-node.vue * Update tree.vue * Update virtual-tree.ts * Update tree-v2.md * Update tree-v2.md * Update virtual-tree.ts * Update tree-node.vue * Update useTree.ts * Update tree.vue * Update virtual-tree.ts * Update tree.test.ts * 修改错误的提交 tree-v2.md * Update useTree wrong.ts * Update tree-node.vue 拖拽事件更新 * Update tree-v2.md, add version info * Update tree-v2.md format * Update tree-v2.md, version change to 2.8.3
This commit is contained in:
MoConWu
GitHub
parent
7017d19260
commit
b2a17f0689
@ -121,15 +121,16 @@ tree-v2/filter
|
||||
|
||||
## TreeV2 Events
|
||||
|
||||
| Name | Description | Parameters |
|
||||
| ---------------- | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| node-click | triggers when a node is clicked | `(data: TreeNodeData, node: TreeNode, e: MouseEvent)` |
|
||||
| node-contextmenu | triggers when a node is clicked by right button | `(e: Event, data: TreeNodeData, node: TreeNode)` |
|
||||
| check-change | triggers when the selected state of the node changes | `(data: TreeNodeData, checked: boolean)` |
|
||||
| check | triggers after clicking the checkbox of a node | `(data: TreeNodeData, info: { checkedKeys: TreeKey[],checkedNodes: TreeData, halfCheckedKeys: TreeKey[], halfCheckedNodes: TreeData,})` |
|
||||
| current-change | triggers when current node changes | `(data: TreeNodeData, node: TreeNode)` |
|
||||
| node-expand | triggers when current node open | `(data: TreeNodeData, node: TreeNode)` |
|
||||
| node-collapse | triggers when current node close | `(data: TreeNodeData, node: TreeNode)` |
|
||||
| Name | Description | Parameters |
|
||||
| ------------------ | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| node-click | triggers when a node is clicked | `(data: TreeNodeData, node: TreeNode, e: MouseEvent)` |
|
||||
| node-drop ^(2.8.3) | triggers when drag someting and drop on a node | `(data: TreeNodeData, node: TreeNode, e: DragEvent)` |
|
||||
| node-contextmenu | triggers when a node is clicked by right button | `(e: Event, data: TreeNodeData, node: TreeNode)` |
|
||||
| check-change | triggers when the selected state of the node changes | `(data: TreeNodeData, checked: boolean)` |
|
||||
| check | triggers after clicking the checkbox of a node | `(data: TreeNodeData, info: { checkedKeys: TreeKey[],checkedNodes: TreeData, halfCheckedKeys: TreeKey[], halfCheckedNodes: TreeData,})` |
|
||||
| current-change | triggers when current node changes | `(data: TreeNodeData, node: TreeNode)` |
|
||||
| node-expand | triggers when current node open | `(data: TreeNodeData, node: TreeNode)` |
|
||||
| node-collapse | triggers when current node close | `(data: TreeNodeData, node: TreeNode)` |
|
||||
|
||||
## TreeV2 Slots
|
||||
|
||||
|
||||
@ -129,6 +129,7 @@ const createTree = (
|
||||
:current-node-key="currentNodeKey"
|
||||
:filter-method="filterMethod"
|
||||
@node-click="onNodeClick"
|
||||
@node-drop="onNodeDrop"
|
||||
@node-expand="onNodeExpand"
|
||||
@check="onNodeCheck"
|
||||
@current-change="onCurrentChange"
|
||||
@ -164,6 +165,7 @@ const createTree = (
|
||||
},
|
||||
methods: {
|
||||
onNodeClick: NOOP,
|
||||
onNodeDrop: NOOP,
|
||||
onNodeExpand: NOOP,
|
||||
onNodeCheck: NOOP,
|
||||
onCurrentChange: NOOP,
|
||||
@ -206,6 +208,20 @@ describe('Virtual Tree', () => {
|
||||
expect(treeVm.flattenTree.length).toBeGreaterThanOrEqual(NODE_NUMBER)
|
||||
})
|
||||
|
||||
test('drop on node', async () => {
|
||||
const onNodeDrop = vi.fn()
|
||||
const { wrapper, treeVm } = createTree({
|
||||
methods: {
|
||||
onNodeDrop,
|
||||
},
|
||||
})
|
||||
await nextTick()
|
||||
const nodes = wrapper.findAll(TREE_NODE_CLASS_NAME)
|
||||
await nodes[0].trigger('drop')
|
||||
expect(onNodeDrop).toBeCalled()
|
||||
expect(treeVm.flattenTree.length).toBeGreaterThanOrEqual(NODE_NUMBER)
|
||||
})
|
||||
|
||||
test('emptyText', async () => {
|
||||
const emptyText = '暂无数据'
|
||||
const { wrapper } = createTree({
|
||||
|
||||
@ -4,6 +4,7 @@ import {
|
||||
CURRENT_CHANGE,
|
||||
NODE_CLICK,
|
||||
NODE_COLLAPSE,
|
||||
NODE_DROP,
|
||||
NODE_EXPAND,
|
||||
TreeOptionsEnum,
|
||||
} from '../virtual-tree'
|
||||
@ -220,6 +221,10 @@ export function useTree(
|
||||
}
|
||||
}
|
||||
|
||||
function handleNodeDrop(node: TreeNode, e: DragEvent) {
|
||||
emit(NODE_DROP, node.data, node, e)
|
||||
}
|
||||
|
||||
function handleCurrentChange(node: TreeNode) {
|
||||
if (!isCurrent(node)) {
|
||||
currentKey.value = node.key
|
||||
@ -314,6 +319,7 @@ export function useTree(
|
||||
isCurrent,
|
||||
isForceHiddenExpandIcon,
|
||||
handleNodeClick,
|
||||
handleNodeDrop,
|
||||
handleNodeCheck,
|
||||
// expose
|
||||
getCurrentNode,
|
||||
|
||||
@ -16,6 +16,9 @@
|
||||
:data-key="node?.key"
|
||||
@click.stop="handleClick"
|
||||
@contextmenu="handleContextMenu"
|
||||
@dragover.prevent
|
||||
@dragenter.prevent
|
||||
@drop.stop="handleDrop"
|
||||
>
|
||||
<div
|
||||
:class="ns.be('node', 'content')"
|
||||
@ -87,6 +90,10 @@ const icon = computed(() => {
|
||||
const handleClick = (e: MouseEvent) => {
|
||||
emit('click', props.node, e)
|
||||
}
|
||||
|
||||
const handleDrop = (e: DragEvent) => {
|
||||
emit('drop', props.node, e)
|
||||
}
|
||||
const handleExpandIconClick = () => {
|
||||
emit('toggle', props.node)
|
||||
}
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
@click="handleNodeClick"
|
||||
@toggle="toggleExpand"
|
||||
@check="handleNodeCheck"
|
||||
@drop="handleNodeDrop"
|
||||
/>
|
||||
</template>
|
||||
</fixed-size-list>
|
||||
@ -83,6 +84,7 @@ const {
|
||||
isCurrent,
|
||||
isForceHiddenExpandIcon,
|
||||
handleNodeClick,
|
||||
handleNodeDrop,
|
||||
handleNodeCheck,
|
||||
// expose
|
||||
toggleCheckbox,
|
||||
|
||||
@ -167,6 +167,7 @@ export const treeNodeContentProps = buildProps({
|
||||
|
||||
// emits
|
||||
export const NODE_CLICK = 'node-click'
|
||||
export const NODE_DROP = 'node-drop'
|
||||
export const NODE_EXPAND = 'node-expand'
|
||||
export const NODE_COLLAPSE = 'node-collapse'
|
||||
export const CURRENT_CHANGE = 'current-change'
|
||||
@ -177,6 +178,8 @@ export const NODE_CONTEXTMENU = 'node-contextmenu'
|
||||
export const treeEmits = {
|
||||
[NODE_CLICK]: (data: TreeNodeData, node: TreeNode, e: MouseEvent) =>
|
||||
data && node && e,
|
||||
[NODE_DROP]: (data: TreeNodeData, node: TreeNode, e: DragEvent) =>
|
||||
data && node && e,
|
||||
[NODE_EXPAND]: (data: TreeNodeData, node: TreeNode) => data && node,
|
||||
[NODE_COLLAPSE]: (data: TreeNodeData, node: TreeNode) => data && node,
|
||||
[CURRENT_CHANGE]: (data: TreeNodeData, node: TreeNode) => data && node,
|
||||
@ -190,6 +193,7 @@ export const treeEmits = {
|
||||
|
||||
export const treeNodeEmits = {
|
||||
click: (node: TreeNode, e: MouseEvent) => !!(node && e),
|
||||
drop: (node: TreeNode, e: DragEvent) => !!(node && e),
|
||||
toggle: (node: TreeNode) => !!node,
|
||||
check: (node: TreeNode, checked: CheckboxValueType) =>
|
||||
node && typeof checked === 'boolean',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user