diff --git a/packages/fighting-design/tree/components/tree-item/index.vue b/packages/fighting-design/tree/components/tree-item/index.vue index 5e55451b21..3ee10c5b6a 100644 --- 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 {} }) @@ -87,13 +88,19 @@ :show-label="false" /> + - {{ model.label }} + + + + + +
{{ model.label }}
diff --git a/packages/fighting-design/tree/components/tree-item/interface.ts b/packages/fighting-design/tree/components/tree-item/interface.ts index b8b54f6aa9..2755e8db15 100644 --- 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 index 6811bbc803..fb4d4537f4 100644 --- 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 index 720666b539..06d149f3de 100644 --- 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 index dc2e002731..502dfafd16 100644 --- 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 index f1bcb01e64..c6bae2f78a 100644 --- a/start/src/App.vue +++ b/start/src/App.vue @@ -1,18 +1,19 @@