Commit 74f7991

authored

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

feat: add mouse event parameter

2 parents 7c3cb49 + 71fb76b commit 74f7991Copy full SHA for 74f7991

File tree

+59

-10

lines changed

+59

-10

lines changed

Lines changed: 3 additions & 3 deletions

Original file line number	Diff line number	Diff line change
`@@ -101,9 +101,9 @@ import '@wsfe/vue-tree/style.css'`
`101`	`101`	`\| select \| 选中时触发(单选) \| 被选中的节点信息 \|`
`102`	`102`	`\| unselect \| 取消选中时触发(单选) \| 被取消选中的节点信息 \|`
`103`	`103`	`\| selected-change \| 选中/取消选中时触发(单选) \| 被选中节点 \|`
`104`		`-\| click \| 点击节点时触发 \| 节点信息 \|`
`105`		`-\| node-dblclick \| 双击节点时触发 \| 节点信息 \|`
`106`		`-\| node-right-click \| 右击节点时触发 \| 节点信息 \|`
	`104`	`+\| click \| 点击节点时触发 \| 节点信息, 鼠标事件 \|`
	`105`	`+\| node-dblclick \| 双击节点时触发 \| 节点信息, 鼠标事件 \|`
	`106`	`+\| node-right-click \| 右击节点时触发 \| 节点信息, 鼠标事件 \|`
`107`	`107`	`\| node-dragstart \| 开始拖拽节点时触发 \| 节点信息, 拖拽事件对象 \|`
`108`	`108`	\| node-dragenter \| dragenter 时触发 \| 节点信息 , 拖拽事件对象, 事件触发的节点部位 `'before' \\| 'body' \\| 'after'` \|
`109`	`109`	\| node-dragover \| dragover 时触发 \| 节点信息 , 拖拽事件对象, 事件触发的节点部位 `'before' \\| 'body' \\| 'after'` \|

Lines changed: 20 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,9 @@`
`10`	`10`	`ref="basicTreeRef"`
`11`	`11`	`:data="basicUsage"`
`12`	`12`	:nodeClassName="node => `generated-class-${node.id}`"
	`13`	`+ @click="handleClick"`
	`14`	`+ @node-dblclick="handleDblClick"`
	`15`	`+ @node-right-click="handleRightClick"`
`13`	`16`	`/>`
`14`	`17`	`</div>`
`15`	`18`	`</div>`
`@@ -268,10 +271,27 @@ export default defineComponent({`
`268`	`271`	`basicTreeRef.value.scrollTo(basicUsage.value[0].id, 0)`
`269`	`272`	`}`
`270`	`273`
	`274`	`+ const handleClick = (node: TreeNode, e: MouseEvent) => {`
	`275`	`+ console.log('click', node, e)`
	`276`	`+ console.log('click mouse position', e.x, e.y)`
	`277`	`+ }`
	`278`	`+ const handleDblClick = (node: TreeNode, e: MouseEvent) => {`
	`279`	`+ console.log('node-dblclick', node, e)`
	`280`	`+ console.log('node-dblclick mouse position', e.x, e.y)`
	`281`	`+ }`
	`282`	`+ const handleRightClick = (node: TreeNode, e: MouseEvent) => {`
	`283`	`+ e.preventDefault()`
	`284`	`+ console.log('node-right-click', node, e)`
	`285`	`+ console.log('node-right-click mouse position', e.x, e.y)`
	`286`	`+ }`
	`287`	`+`
`271`	`288`	`return {`
`272`	`289`	`// 基本用法`
`273`	`290`	`basicUsage,`
`274`	`291`	`basicTreeRef,`
	`292`	`+ handleClick,`
	`293`	`+ handleDblClick,`
	`294`	`+ handleRightClick,`
`275`	`295`	`handleExpandAll,`
`276`	`296`	`handleCollapseAll,`
`277`	`297`

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@wsfe/vue-tree",`
`3`		`- "version": "3.0.10",`
	`3`	`+ "version": "3.1.0",`
`4`	`4`	`"types": "./types",`
`5`	`5`	`"description": "A vue tree component using virtual list.",`
`6`	`6`	`"main": "./dist/v3/vue-tree.umd.js",`

Lines changed: 6 additions & 6 deletions

Original file line number	Diff line number	Diff line change
`@@ -219,8 +219,8 @@ export default defineComponent({`
`219`	`219`	`emit('check', fullData.value)`
`220`	`220`	`}`
`221`	`221`
`222`		`- function handleSelect(): void {`
`223`		`- emit('click', fullData.value)`
	`222`	`+ function handleSelect(e:MouseEvent): void {`
	`223`	`+ emit('click', fullData.value, e)`
`224`	`224`	`if (props.selectable) {`
`225`	`225`	`if (props.disableAll \|\| props.data?.disabled) return`
`226`	`226`	`if (props.data?.selected && !props.unselectOnClick) return`
`@@ -232,12 +232,12 @@ export default defineComponent({`
`232`	`232`	`}`
`233`	`233`	`}`
`234`	`234`
`235`		`- function handleDblclick(): void {`
`236`		`- emit('node-dblclick', fullData.value)`
	`235`	`+ function handleDblclick(e:MouseEvent): void {`
	`236`	`+ emit('node-dblclick', fullData.value, e)`
`237`	`237`	`}`
`238`	`238`
`239`		`- function handleRightClick(): void {`
`240`		`- emit('node-right-click', fullData.value)`
	`239`	`+ function handleRightClick(e:MouseEvent): void {`
	`240`	`+ emit('node-right-click', fullData.value, e)`
`241`	`241`	`}`
`242`	`242`
`243`	`243`	`//#region Drag handlers`

Lines changed: 29 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -611,3 +611,32 @@ describe('节点拖拽测试', () => {`
`611`	`611`	`})`
`612`	`612`	`})`
`613`	`613`	`})`
	`614`	`+`
	`615`	`+describe('节点鼠标事件', () => {`
	`616`	`+ it('点击、双击与右键', done => {`
	`617`	`+ const data = genData().data`
	`618`	`+ const wrapper = mount(VTree as any, {`
	`619`	`+ propsData: {`
	`620`	`+ data,`
	`621`	`+ }`
	`622`	`+ })`
	`623`	`+ const vm = wrapper.vm`
	`624`	`+`
	`625`	`+ vm.$nextTick(() => {`
	`626`	`+ const treeNodes: any[] = wrapper.findAllComponents({ name: 'CTreeNode' })`
	`627`	`+`
	`628`	`+ treeNodes[0].find('.ctree-tree-node__title').trigger('click')`
	`629`	`+ treeNodes[0].find('.ctree-tree-node__title').trigger('dblclick')`
	`630`	`+ treeNodes[0].find('.ctree-tree-node__title').trigger('contextmenu')`
	`631`	`+ vm.$nextTick(() => {`
	`632`	`+ expect(wrapper.emitted('click')).toHaveLength(1)`
	`633`	`+ expect((wrapper.emitted('click')?.[0] as any)?.[1]).toBeInstanceOf(MouseEvent)`
	`634`	`+ expect(wrapper.emitted('node-dblclick')).toHaveLength(1)`
	`635`	`+ expect((wrapper.emitted('node-dblclick')?.[0] as any)?.[1]).toBeInstanceOf(MouseEvent)`
	`636`	`+ expect(wrapper.emitted('node-right-click')).toHaveLength(1)`
	`637`	`+ expect((wrapper.emitted('node-right-click')?.[0] as any)?.[1]).toBeInstanceOf(MouseEvent)`
	`638`	`+ done()`
	`639`	`+ })`
	`640`	`+ })`
	`641`	`+ })`
	`642`	`+})`

Comments

(0)