feat: 优化 tree

FightingDesign · Aug 12, 2023 · 3c9fa63 · 3c9fa63
1 parent 537187c
commit 3c9fa63
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 18 deletions.
diff --git a/packages/fighting-design/tree/components/tree-item/index.vue b/packages/fighting-design/tree/components/tree-item/index.vue
@@ -13,7 +13,7 @@
 
   const prop = defineProps(Props)
 
-  defineOptions({ name: 'f-tree-item' })
+  defineOptions({ name: 'FTreeItem' })
 
   const { run } = useRun()
 
@@ -61,6 +61,7 @@
     if (__level) {
       return { '--tree-item-level-padding': `${__level * offset.value}px` }
     }
+
     return {}
   })
 </script>
@@ -87,13 +88,19 @@
           :show-label="false"
         />
 
+        <!-- 展示的箭头 icon -->
         <f-svg-icon
           v-if="isFolder"
           :class="{ 'f-tree-item__icon-animation': isOpen }"
-          :size="17"
+          :size="15"
           :icon="FIconChevronRight"
         />
-        {{ model.label }}
+
+        <!-- 遍历中需要展示的 icon -->
+        <f-svg-icon v-if="model.icon" :size="15" :icon="model.icon" />
+
+        <!-- label 上的文字内容 -->
+        <div class="f-tree-item__text">{{ model.label }}</div>
       </div>
 
       <!-- 操作栏 -->

diff --git a/packages/fighting-design/tree/components/tree-item/interface.ts b/packages/fighting-design/tree/components/tree-item/interface.ts
@@ -1,3 +1,5 @@
+import type { FightingIcon } from '../../../_interface'
+
 /**
  * 子数每一项的类型接口
  * 
@@ -10,6 +12,7 @@
 export interface TreeItemModel {
   label: string
   __level: number
+  icon?: FightingIcon
   value?: number | string
   disabled?: boolean
   children?: TreeItemModel[]

diff --git a/packages/fighting-design/tree/src/interface.ts b/packages/fighting-design/tree/src/interface.ts
@@ -1,4 +1,5 @@
 import type { TreeItemModel } from '../components'
+import type { FightingIcon } from '../../_interface'
 
 export type { TreeProps } from './props'
 
@@ -8,12 +9,14 @@ export type { TreeProps } from './props'
  * @param { string } label label
  * @param { number | string } value 多选 checkbox 绑定的值
  * @param { boolean } disabled 是否禁用当前标签
+ * @param { Object } icon 自定义 icon
  * @param { Array } [children] 孩子节点
  */
 export interface TreeDataItem {
   label: string
   value?: number | string
   disabled?: boolean
+  icon?: FightingIcon
   children?: TreeDataItem[]
 }
 

diff --git a/packages/fighting-design/tree/src/tree.vue b/packages/fighting-design/tree/src/tree.vue
@@ -9,7 +9,7 @@
   import type { CheckboxGroupChange } from '../../checkbox-group'
 
   const prop = defineProps(Props)
-  const modelVlaue = defineModel('check', { type: Array, default: [] })
+  const modelValue = defineModel('check', { type: Array, default: [] })
 
   defineOptions({ name: 'FTree' })
 
@@ -53,7 +53,7 @@
   const checkOption = ref([])
 
   const checkboxChange: CheckboxGroupChange = (val): void => {
-    modelVlaue.value = val
+    modelValue.value = val
   }
 
   /** 注入依赖项 */

diff --git a/packages/fighting-theme/src/tree.scss b/packages/fighting-theme/src/tree.scss
@@ -33,21 +33,27 @@
 
       // 前缀
       .f-tree-item__label-prefix {
-        font-size: 15px;
-        color: #333;
         display: flex;
         align-items: center;
-        column-gap: 8px;
+        column-gap: 6px;
 
         // icon
         .f-svg-icon {
           margin-left: 5px;
           transition: 0.3s;
+          font-size: 15px;
+          color: #333;
 
           &.f-tree-item__icon-animation {
             transform: rotate(90deg);
           }
         }
+
+        // 文字内容
+        .f-tree-item__text {
+          font-size: 15px;
+          color: #333;
+        }
       }
     }
 

diff --git a/start/src/App.vue b/start/src/App.vue
@@ -1,18 +1,19 @@
 <script lang="ts" setup>
-  import { ref } from 'vue'
+  import { h, ref } from 'vue'
+  import { FIconAppsMinus } from '@fighting-design/fighting-icon'
   import type { TreeClickLabel } from 'fighting-design'
 
   const data = ref([
     {
       label: 'Node 1',
       value: 2121,
-      disabled: true,
+      icon: h(FIconAppsMinus),
       children: [
         {
           label: 'Node 1-1',
           value: '今天好啊',
           children: [
-            { label: 'Node 1-1-1' },
+            { label: 'Node 1-1-1', icon: FIconAppsMinus },
             { label: 'Node 1-1-2' },
             { label: 'Node 1-1-3' }
           ]
@@ -42,25 +43,27 @@
   ])
 
   const onClickLabel: TreeClickLabel = (e, v, r, d) => {
-    // console.log(v, r, d)
+    console.log(v, r, d)
   }
 
   const check = ref([])
 </script>
 
 <template>
   {{ check }}
-  <f-tree v-model:check="check" :offset="10" is-check :data="data" :on-click-label="onClickLabel">
+  <f-button :after-icon="FIconAppsMinus"></f-button>
+  <f-tree
+    v-model:check="check"
+    :offset="50"
+    is-check
+    :data="data"
+    :on-click-label="onClickLabel"
+  >
     <!-- <template #options>
       <f-space>
         <f-button size="mini" round type="danger">删除</f-button>
         <f-button size="mini" round type="info">查看</f-button>
       </f-space>
     </template> -->
   </f-tree>
-
-  <!-- {{ option1 }} - {{ option2 }}
-  <f-checkbox-group v-model="option2">
-    <f-checkbox v-model="option1" label="酸辣土豆丝" :show-label="false" />
-  </f-checkbox-group> -->
 </template>