feat(tree): add tree content/icon slot (DevCloudFE#405)

* feat(tree): 增加content插槽 * feat(tree): 增加icon插槽

Author: kagol

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

@@ -0,0 +1,24 @@
+import { defineComponent, PropType, toRefs } from 'vue';
+import { ITreeNode } from '../core/use-tree-types';
+import useTreeNode from './use-tree-node';
+
+export default defineComponent({
+ name: 'DTreeNodeContent',
+ props: {
+ data: {
+ type: Object as PropType<ITreeNode>,
+ },
+ },
+ setup(props) {
+ const { data } = toRefs(props);
+ const {
+ nodeTitleClass,
+ } = useTreeNode(data);
+
+ return () => {
+ return (
+ <span class={nodeTitleClass.value}>{data.value?.label}</span>
+ );
+ };
+ },
+});

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

@@ -1,8 +1,9 @@
-import { defineComponent, inject, PropType, toRefs } from 'vue';
+import { defineComponent, inject, PropType, renderSlot, toRefs, useSlots } from 'vue';
 import { NODE_HEIGHT, USE_TREE_TOKEN } from '../const';
 import { IInnerTreeNode } from '../core/use-tree-types';
 import DTreeNodeToggle from './tree-node-toggle';
 import { Checkbox } from '../../../checkbox';
+import DTreeNodeContent from './tree-node-content';
 import useTreeNode from './use-tree-node';
 
 export default defineComponent({
@@ -12,15 +13,14 @@ export default defineComponent({
  type: Object as PropType<IInnerTreeNode>,
  },
  },
- setup(props) {
+ setup(props, { slots }) {
  const { data } = toRefs(props);
- const { selectNode, toggleCheckNode } = inject(USE_TREE_TOKEN);
+ const { selectNode, toggleCheckNode, toggleNode } = inject(USE_TREE_TOKEN);
 
  const {
  nodeClass,
  nodeStyle,
  nodeContentClass,
- nodeTitleClass,
  nodeVLineClass,
  nodeVLineStyle,
  nodeHLineClass,
@@ -32,7 +32,11 @@ export default defineComponent({
  <span class={nodeVLineClass.value} style={nodeVLineStyle.value}></span>
  <div class={nodeContentClass.value} onClick={() => { selectNode(data.value); }}>
  <span class={nodeHLineClass.value}></span>
- <DTreeNodeToggle data={data.value} />
+ {
+ slots.icon
+ ? renderSlot(useSlots(), 'icon', { nodeData: data, toggleNode })
+ : <DTreeNodeToggle data={data.value} />
+ }
  <div class="devui-tree-node__content--value-wrapper" style={{ height: `${NODE_HEIGHT}px`}}>
  <Checkbox
  key={data.value?.id}
@@ -41,7 +45,11 @@ export default defineComponent({
  onUpdate:modelValue={() => { toggleCheckNode(data.value); }}
  onClick={(event: MouseEvent) => { event.stopPropagation(); }}
  />
- <span class={nodeTitleClass.value}>{data.value?.label}</span>
+ {
+ slots.default
+ ? renderSlot(useSlots(), 'default', { nodeData: data })
+ : <DTreeNodeContent data={data} />
+ }
  </div>
  </div>
  </div>

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

@@ -1,6 +1,8 @@
 import { defineComponent, PropType, provide, renderSlot, toRefs, useSlots, watch } from 'vue';
 import type { ITreeNode } from './core/use-tree-types';
 import DTreeNode from './components/tree-node';
+import DTreeNodeContent from './components/tree-node-content';
+import DTreeNodeToggle from './components/tree-node-toggle';
 import useTree from './core/use-tree';
 import useCheck from './core/use-check';
 import useSelect from './core/use-select';
@@ -26,6 +28,7 @@ export default defineComponent({
  const {
  setTree,
  getExpendedTree,
+ toggleNode,
  } = treeFactory;
 
  // 外部同步内部
@@ -42,7 +45,16 @@ export default defineComponent({
  ? renderSlot(useSlots(), 'default', {
  treeFactory: treeFactory, nodeData: treeNode
  })
- : <DTreeNode data={treeNode} />
+ : <DTreeNode data={treeNode}>
+ {{
+ default: () => slots.content
+ ? renderSlot(useSlots(), 'content', { nodeData: treeNode })
+ : <DTreeNodeContent data={treeNode} />,
+ icon: () => slots.icon
+ ? renderSlot(useSlots(), 'icon', { nodeData: treeNode, toggleNode })
+ : <DTreeNodeToggle data={treeNode} />,
+ }}
+ </DTreeNode>
  ))
  }
  </div>

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

@@ -1038,7 +1038,23 @@ export default defineComponent({
 ```vue
 <template>
  <d-button @click="changeData">changeData</d-button>
- <d-new-tree :data="data"></d-new-tree>
+ <d-new-tree :data="data">
+ <template #content="{nodeData}">
+ <svg t="1649231851892" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2194" width="16" height="16"><path d="M946.5 505L560.1 118.8l-25.9-25.9c-12.3-12.2-32.1-12.2-44.4 0L77.5 505c-12.3 12.3-18.9 28.6-18.8 46 0.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8 12.1-12.1 18.7-28.2 18.7-45.3 0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204z m217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z" p-id="2195"></path></svg>
+ {{nodeData.label}}
+ </template>
+ <template #icon="{nodeData, toggleNode}">
+ <span v-if="nodeData.isLeaf" class="devui-tree-node__indent"></span>
+ <span v-else @click="(event) => {
+ event.stopPropagation();
+ toggleNode(nodeData);
+ }"
+ >
+ <svg v-if="!nodeData.expanded" t="1649233280637" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4033" width="12" height="12"><path d="M204.58705 951.162088 204.58705 72.836889 819.41295 511.998977Z" p-id="4034" fill="#c0c4cc"></path></svg>
+ <svg v-else t="1649232304515" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3732" width="12" height="12"><path d="M511.999488 819.413462 72.8374 204.586538 951.1626 204.586538Z" p-id="3733" fill="#c0c4cc"></path></svg>
+ </span>
+ </template>
+ </d-new-tree>
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';