feat: 增加图标自定义和勾选功能

Author: 57code

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

@@ -5,6 +5,7 @@ export interface TreeItem {
   children?: TreeData;
   disableToggle?: boolean;
   disabled?: boolean;
+  checked?: boolean, // 是否勾选
   [key: string]: any;
 }
 
@@ -15,6 +16,11 @@ export const treeProps = {
     type: Array as PropType<TreeData>,
     default: () => [],
   },
+  // 新增
+  checkable: {
+    type: Boolean,
+    default: false
+  },
 } as const;
 
 export type TreeProps = ExtractPropTypes<typeof treeProps>;

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

@@ -10,8 +10,8 @@ export default defineComponent({
   name: 'DTree',
   props: treeProps,
   emits: [],
-  setup(props: TreeProps, ctx) {
-    const { data } = toRefs(props)
+  setup(props: TreeProps, { slots }) {
+    const { data, checkable } = toRefs(props)
     const { openedData, toggle } = useToggle(data.value)
     const { nodeClassNameReflect, handleInitNodeClassNameReflect, handleClickOnNode } = useHighlightNode()
 
@@ -22,11 +22,16 @@ export default defineComponent({
 
     const renderIcon = (item: TreeItem) => {
       return item.children
-        ? <span class={item.disableToggle && 'toggle-disabled'}>
+        ? <span 
+            class={item.disableToggle && 'toggle-disabled'}
+            onClick={() => toggle(item)}>
           {
-            item.open
-              ? <IconOpen class='mr-xs' onClick={() => toggle(item)} />
-              : <IconClose class='mr-xs' onClick={() => toggle(item)} />
+            // 增加插槽逻辑
+            slots.icon
+              ? slots.icon(item)
+              : item.open
+                ? <IconOpen class='mr-xs' />
+                : <IconClose class='mr-xs' />
           }
         </span>
         : <Indent />
@@ -46,6 +51,10 @@ export default defineComponent({
             <div class="devui-tree-node__content--value-wrapper">
               {/* 折叠图标 */}
               {renderIcon(item)}
+              {/* 复选框 */}
+              {/* { checkable.value && <d-checkbox v-model={item.checked} />} */}
+              { checkable.value && <input type="checkbox" v-model={item.checked} />}
+              {/* 文本 */}
               <span class={[
                 'devui-tree-node__title',
                 item.disabled && 'select-disabled']}>

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

@@ -4,7 +4,34 @@
 
 ```vue
 <template>
-  <d-tree :data="data"></d-tree>
+  <d-tree :data="data" checkable>
+    <template #icon="item">
+      <svg
+        class="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="4160"
+        width="12"
+        height="12"
+        v-if="item.open"
+      >
+        <path d="M64 320l448 448 448-448z" fill="#8C92A4" p-id="4161"></path>
+      </svg>
+      <svg
+        class="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="4361"
+        width="12"
+        height="12"
+        v-else
+      >
+        <path d="M256 64l448 448-448 448z" fill="#8C92A4" p-id="4362"></path>
+      </svg>
+    </template>
+  </d-tree>
 </template>
 
 <script lang="ts">