Merge pull request #69 from wsfe/feat/mouse-event

feat: add mouse event parameter

Author: ChuChencheng

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'` |

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"
             />
           </div>
         </div>
@@ -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,
 

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",

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

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()
+      })
+    })
+  })
+})