Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

feat: add mouse event parameter #69

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ChuChencheng merged 1 commit into dev from feat/mouse-event
Aug 17, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions README.md
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'` |
Expand Down
20 changes: 20 additions & 0 deletions examples/Feature.vue
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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,

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
12 changes: 6 additions & 6 deletions src/components/TreeNode.vue
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
29 changes: 29 additions & 0 deletions tests/unit/tree.spec.ts
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 によって変換されたページ (->オリジナル) /