From 71fb76b1d926aca98152634d104a80f8371e8401 Mon Sep 17 00:00:00 2001 From: ChuChencheng Date: 2023年8月18日 02:47:40 +0800 Subject: [PATCH] feat: add mouse event parameter when emitting click, dblclick and contextmenu events --- README.md | 6 +++--- examples/Feature.vue | 20 ++++++++++++++++++++ package.json | 2 +- src/components/TreeNode.vue | 12 ++++++------ tests/unit/tree.spec.ts | 29 +++++++++++++++++++++++++++++ 5 files changed, 59 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 1f39f91..7c7dcc7 100644 --- a/README.md +++ b/README.md @@ -101,9 +101,9 @@ import '@wsfe/vue-tree/style.css' | select | 选中时触发(单选) | 被选中的节点信息 | | unselect | 取消选中时触发(单选) | 被取消选中的节点信息 | | selected-change | 选中/取消选中时触发(单选) | 被选中节点 | -| click | 点击节点时触发 | 节点信息 | -| node-dblclick | 双击节点时触发 | 节点信息 | -| node-right-click | 右击节点时触发 | 节点信息 | +| click | 点击节点时触发 | 节点信息, 鼠标事件 | +| node-dblclick | 双击节点时触发 | 节点信息, 鼠标事件 | +| node-right-click | 右击节点时触发 | 节点信息, 鼠标事件 | | node-dragstart | 开始拖拽节点时触发 | 节点信息, 拖拽事件对象 | | node-dragenter | dragenter 时触发 | 节点信息 , 拖拽事件对象, 事件触发的节点部位 `'before' \| 'body' \| 'after'` | | node-dragover | dragover 时触发 | 节点信息 , 拖拽事件对象, 事件触发的节点部位 `'before' \| 'body' \| 'after'` | diff --git a/examples/Feature.vue b/examples/Feature.vue index c1a33a3..86f1054 100644 --- a/examples/Feature.vue +++ b/examples/Feature.vue @@ -10,6 +10,9 @@ ref="basicTreeRef" :data="basicUsage" :nodeClassName="node => `generated-class-${node.id}`" + @click="handleClick" + @node-dblclick="handleDblClick" + @node-right-click="handleRightClick" /> @@ -268,10 +271,27 @@ export default defineComponent({ basicTreeRef.value.scrollTo(basicUsage.value[0].id, 0) } + const handleClick = (node: TreeNode, e: MouseEvent) => { + console.log('click', node, e) + console.log('click mouse position', e.x, e.y) + } + const handleDblClick = (node: TreeNode, e: MouseEvent) => { + console.log('node-dblclick', node, e) + console.log('node-dblclick mouse position', e.x, e.y) + } + const handleRightClick = (node: TreeNode, e: MouseEvent) => { + e.preventDefault() + console.log('node-right-click', node, e) + console.log('node-right-click mouse position', e.x, e.y) + } + return { // 基本用法 basicUsage, basicTreeRef, + handleClick, + handleDblClick, + handleRightClick, handleExpandAll, handleCollapseAll, diff --git a/package.json b/package.json index c92874d..54f87c8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@wsfe/vue-tree", - "version": "3.0.10", + "version": "3.1.0", "types": "./types", "description": "A vue tree component using virtual list.", "main": "./dist/v3/vue-tree.umd.js", diff --git a/src/components/TreeNode.vue b/src/components/TreeNode.vue index c63eb5d..16f259e 100644 --- a/src/components/TreeNode.vue +++ b/src/components/TreeNode.vue @@ -219,8 +219,8 @@ export default defineComponent({ emit('check', fullData.value) } - function handleSelect(): void { - emit('click', fullData.value) + function handleSelect(e: MouseEvent): void { + emit('click', fullData.value, e) if (props.selectable) { if (props.disableAll || props.data?.disabled) return if (props.data?.selected && !props.unselectOnClick) return @@ -232,12 +232,12 @@ export default defineComponent({ } } - function handleDblclick(): void { - emit('node-dblclick', fullData.value) + function handleDblclick(e: MouseEvent): void { + emit('node-dblclick', fullData.value, e) } - function handleRightClick(): void { - emit('node-right-click', fullData.value) + function handleRightClick(e: MouseEvent): void { + emit('node-right-click', fullData.value, e) } //#region Drag handlers diff --git a/tests/unit/tree.spec.ts b/tests/unit/tree.spec.ts index 65e4005..6d9a355 100644 --- a/tests/unit/tree.spec.ts +++ b/tests/unit/tree.spec.ts @@ -611,3 +611,32 @@ describe('节点拖拽测试', () => { }) }) }) + +describe('节点鼠标事件', () => { + it('点击、双击与右键', done => { + const data = genData().data + const wrapper = mount(VTree as any, { + propsData: { + data, + } + }) + const vm = wrapper.vm + + vm.$nextTick(() => { + const treeNodes: any[] = wrapper.findAllComponents({ name: 'CTreeNode' }) + + treeNodes[0].find('.ctree-tree-node__title').trigger('click') + treeNodes[0].find('.ctree-tree-node__title').trigger('dblclick') + treeNodes[0].find('.ctree-tree-node__title').trigger('contextmenu') + vm.$nextTick(() => { + expect(wrapper.emitted('click')).toHaveLength(1) + expect((wrapper.emitted('click')?.[0] as any)?.[1]).toBeInstanceOf(MouseEvent) + expect(wrapper.emitted('node-dblclick')).toHaveLength(1) + expect((wrapper.emitted('node-dblclick')?.[0] as any)?.[1]).toBeInstanceOf(MouseEvent) + expect(wrapper.emitted('node-right-click')).toHaveLength(1) + expect((wrapper.emitted('node-right-click')?.[0] as any)?.[1]).toBeInstanceOf(MouseEvent) + done() + }) + }) + }) +})

AltStyle によって変換されたページ (->オリジナル) /