From 1fdd2cee8f2a07820dd459339edff51123d9001b Mon Sep 17 00:00:00 2001 From: msidolphin Date: Wed, 19 Jan 2022 17:13:18 +0800 Subject: [PATCH] feat(components): [tree] node-click passes event object (#4312) re 4307 --- docs/en-US/component/tree-v2.md | 2 +- docs/en-US/component/tree.md | 2 +- packages/components/tree-v2/src/composables/useTree.ts | 4 ++-- packages/components/tree-v2/src/tree-node.vue | 4 ++-- packages/components/tree-v2/src/virtual-tree.ts | 5 +++-- packages/components/tree/src/tree-node.vue | 4 ++-- packages/element-plus/package.json | 2 -- 7 files changed, 11 insertions(+), 12 deletions(-) diff --git a/docs/en-US/component/tree-v2.md b/docs/en-US/component/tree-v2.md index 44d93b2388..0c492e5674 100644 --- a/docs/en-US/component/tree-v2.md +++ b/docs/en-US/component/tree-v2.md @@ -116,7 +116,7 @@ tree-v2/filter | Event Name | Description | Parameters | | ---------------- | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -| node-click | triggers when a node is clicked | `(data: TreeNodeData, node: TreeNode)` | +| 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,})` | diff --git a/docs/en-US/component/tree.md b/docs/en-US/component/tree.md index 2a941f777e..828443d20f 100644 --- a/docs/en-US/component/tree.md +++ b/docs/en-US/component/tree.md @@ -181,7 +181,7 @@ tree/draggable | Event Name | Description | Parameters | | ---------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| node-click | triggers when a node is clicked | three parameters: node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself | +| node-click | triggers when a node is clicked | three parameters: node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself, event object | | node-contextmenu | triggers when a node is clicked by right button | four parameters: event, node object corresponding to the node clicked, `node` property of TreeNode, TreeNode itself | | check-change | triggers when the selected state of the node changes | three parameters: node object corresponding to the node whose selected state is changed, whether the node is selected, whether node's subtree has selected nodes | | check | triggers after clicking the checkbox of a node | two parameters: node object corresponding to the node that is checked / unchecked, tree checked status object which has four props: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys | diff --git a/packages/components/tree-v2/src/composables/useTree.ts b/packages/components/tree-v2/src/composables/useTree.ts index 50c04d2ef6..6315b4d48f 100644 --- a/packages/components/tree-v2/src/composables/useTree.ts +++ b/packages/components/tree-v2/src/composables/useTree.ts @@ -190,8 +190,8 @@ export function useTree(props: TreeProps, emit) { } } - function handleNodeClick(node: TreeNode) { - emit(NODE_CLICK, node.data, node) + function handleNodeClick(node: TreeNode, e: MouseEvent) { + emit(NODE_CLICK, node.data, node, e) handleCurrentChange(node) if (props.expandOnClickNode) { toggleExpand(node) diff --git a/packages/components/tree-v2/src/tree-node.vue b/packages/components/tree-v2/src/tree-node.vue index 215a7d6b92..5b1277db60 100644 --- a/packages/components/tree-v2/src/tree-node.vue +++ b/packages/components/tree-v2/src/tree-node.vue @@ -84,8 +84,8 @@ export default defineComponent({ return tree?.props.icon ?? DEFAULT_ICON }) - const handleClick = () => { - emit('click', props.node) + const handleClick = (e: MouseEvent) => { + emit('click', props.node, e) } const handleExpandIconClick = () => { emit('toggle', props.node) diff --git a/packages/components/tree-v2/src/virtual-tree.ts b/packages/components/tree-v2/src/virtual-tree.ts index d6b473afbb..ef65015d0b 100644 --- a/packages/components/tree-v2/src/virtual-tree.ts +++ b/packages/components/tree-v2/src/virtual-tree.ts @@ -162,7 +162,8 @@ export const NODE_CHECK_CHANGE = 'check-change' export const NODE_CONTEXTMENU = 'node-contextmenu' export const treeEmits = { - [NODE_CLICK]: (data: TreeNodeData, node: TreeNode) => data && node, + [NODE_CLICK]: (data: TreeNodeData, node: TreeNode, e: MouseEvent) => + 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, @@ -175,7 +176,7 @@ export const treeEmits = { } export const treeNodeEmits = { - click: (node: TreeNode) => !!node, + click: (node: TreeNode, e: MouseEvent) => !!(node && e), toggle: (node: TreeNode) => !!node, check: (node: TreeNode, checked: boolean) => node && typeof checked === 'boolean', diff --git a/packages/components/tree/src/tree-node.vue b/packages/components/tree/src/tree-node.vue index d1ff61a748..648deeecf9 100644 --- a/packages/components/tree/src/tree-node.vue +++ b/packages/components/tree/src/tree-node.vue @@ -224,7 +224,7 @@ export default defineComponent({ oldIndeterminate.value = indeterminate } - const handleClick = () => { + const handleClick = (e: MouseEvent) => { const store = tree.store.value store.setCurrentNode(props.node) tree.ctx.emit( @@ -243,7 +243,7 @@ export default defineComponent({ target: { checked: !props.node.checked }, }) } - tree.ctx.emit('node-click', props.node.data, props.node, instance) + tree.ctx.emit('node-click', props.node.data, props.node, instance, e) } const handleContextMenu = (event: Event) => { diff --git a/packages/element-plus/package.json b/packages/element-plus/package.json index ae3a62b5ae..8ed99b4e7f 100644 --- a/packages/element-plus/package.json +++ b/packages/element-plus/package.json @@ -30,8 +30,6 @@ "dist/*", "theme-chalk/*.css", "theme-chalk/src/*.scss", - "es/components/*/style/*", - "lib/components/*/style/*", "lib/components/**/*", "es/components/**/*" ],