feat(tree): 增加节点点击事件

Author: kagol

packages/devui-vue/devui/tree/src/components/tree-node.tsx

@@ -1,6 +1,6 @@
 import type { ComputedRef } from 'vue';
 import { computed, defineComponent, inject, PropType, renderSlot, toRefs, useSlots } from 'vue';
-import { NODE_HEIGHT, USE_TREE_TOKEN } from '../const';
+import { NODE_HEIGHT, TREE_INSTANCE, USE_TREE_TOKEN } from '../const';
 import { IInnerTreeNode, IUseTree, ICheck } from '../composables/use-tree-types';
 import DTreeNodeToggle from './tree-node-toggle';
 import { Checkbox } from '../../../checkbox';
@@ -24,6 +24,7 @@ export default defineComponent({
  setup(props, { slots }) {
  const { data, check } = toRefs(props);
  const { toggleSelectNode, toggleCheckNode, toggleNode, getChildren } = inject(USE_TREE_TOKEN) as Partial<IUseTree>;
+ const treeInstance = inject(TREE_INSTANCE);
  const ns = useNamespace('tree');
 
  const { nodeClass, nodeStyle, nodeContentClass, nodeVLineClass, nodeVLineStyles, nodeHLineClass } = useTreeNode(
@@ -66,6 +67,7 @@ export default defineComponent({
  class={nodeContentClass.value}
  onClick={() => {
  toggleSelectNode?.(data.value);
+ treeInstance.emit('node-click', data.value);
  }}>
  <span class={nodeHLineClass.value}></span>
  {slots.icon ? renderSlot(useSlots(), 'icon', { nodeData: data, toggleNode }) : <DTreeNodeToggle data={data.value} />}

packages/devui-vue/devui/tree/src/const.ts

@@ -1,3 +1,4 @@
 export const USE_TREE_TOKEN = 'use-tree-token';
+export const TREE_INSTANCE = 'tree-instance';
 export const NODE_HEIGHT = 30;
 export const NODE_INDENT = 24;

packages/devui-vue/devui/tree/src/tree.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, provide, ref, renderSlot, SetupContext, toRefs, useSlots, watch } from 'vue';
+import { defineComponent, getCurrentInstance, provide, ref, renderSlot, SetupContext, toRefs, useSlots, watch } from 'vue';
 import type { IInnerTreeNode, ICheckStrategy } from './composables/use-tree-types';
 import DTreeNode from './components/tree-node';
 import DTreeNodeContent from './components/tree-node-content';
@@ -9,7 +9,7 @@ import useCheck from './composables/use-check';
 import useSelect from './composables/use-select';
 import useOperate from './composables/use-operate';
 import useMergeNodes from './composables/use-merge-nodes';
-import { USE_TREE_TOKEN, NODE_HEIGHT } from './const';
+import { USE_TREE_TOKEN, NODE_HEIGHT, TREE_INSTANCE } from './const';
 import { TreeProps, treeProps } from './tree-types';
 import { useNamespace } from '../../shared/hooks/use-namespace';
 import { formatCheckStatus } from './utils';
@@ -18,9 +18,10 @@ import './tree.scss';
 export default defineComponent({
  name: 'DTree',
  props: treeProps,
- emits: ['toggle-change', 'check-change', 'select-change'],
+ emits: ['toggle-change', 'check-change', 'select-change', 'node-click'],
  setup(props: TreeProps, context: SetupContext) {
  const { slots, expose } = context;
+ const treeInstance = getCurrentInstance();
  const { data, check } = toRefs(props);
  const ns = useNamespace('tree');
 
@@ -46,6 +47,7 @@ export default defineComponent({
  watch(data, setTree);
 
  provide(USE_TREE_TOKEN, treeFactory);
+ provide(TREE_INSTANCE, treeInstance);
 
  expose({
  treeFactory,

packages/devui-vue/docs/components/tree/index.md

@@ -61,6 +61,7 @@ export default defineComponent({
  @toggle-change="toggleChange"
  @check-change="checkChange"
  @select-change="selectChange"
+ @node-click="nodeClick"
  ></d-tree>
 </template>
 
@@ -121,6 +122,10 @@ export default defineComponent({
  console.log('selectChange node:', node);
  };
 
+ const nodeClick = (node) => {
+ console.log('nodeClick node:', node);
+ };
+
  return {
  data,
  openCheck,
@@ -129,6 +134,7 @@ export default defineComponent({
  toggleChange,
  checkChange,
  selectChange,
+ nodeClick,
  };
  },
 });
@@ -448,6 +454,7 @@ export default defineComponent({
 | toggle-change | `Function(node)` | 节点展开/收起的回调事件，返回选中的节点对象 | [可勾选](#可勾选) |
 | check-change | `Function(node)` | 节点勾选的回调事件，返回选中的节点对象 | [可勾选](#可勾选) |
 | select-change | `Function(node)` | 节点选中的回调事件，返回选中的节点对象 | [可勾选](#可勾选) |
+| node-click | `Function(node)` | 节点点击事件，返回点击的节点对象 | [可勾选](#可勾选) |
 
 ### Tree 插槽