From 5e157b1a4332b57967d31355507dd4dbc03bc1b7 Mon Sep 17 00:00:00 2001 From: kagol Date: Fri, 17 Sep 2021 08:35:05 +0800 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=E5=9F=BA=E7=A1=80=E7=89=88Tree?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/tree/index.ts | 18 ++++++++++ devui/tree/src/tree-types.ts | 18 ++++++++++ devui/tree/src/tree.scss | 3 ++ devui/tree/src/tree.tsx | 22 ++++++++++++ sites/components/tree/data.ts | 35 ++++++++++++++++++ sites/components/tree/index.md | 66 ++++++++++++++++++++++++++++++++++ 6 files changed, 162 insertions(+) create mode 100644 devui/tree/index.ts create mode 100644 devui/tree/src/tree-types.ts create mode 100644 devui/tree/src/tree.scss create mode 100644 devui/tree/src/tree.tsx create mode 100644 sites/components/tree/data.ts create mode 100644 sites/components/tree/index.md diff --git a/devui/tree/index.ts b/devui/tree/index.ts new file mode 100644 index 00000000..6639f0e8 --- /dev/null +++ b/devui/tree/index.ts @@ -0,0 +1,18 @@ +import type { App } from 'vue' +import Tree from './src/tree' + +Tree.install = function(app: App): void { + app.component(Tree.name, Tree) +} + +export { Tree } + +export default { + title: 'Tree 树', + category: '数据展示', + status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + install(app: App): void { + + app.use(Tree as any) + } +} diff --git a/devui/tree/src/tree-types.ts b/devui/tree/src/tree-types.ts new file mode 100644 index 00000000..2c0e50de --- /dev/null +++ b/devui/tree/src/tree-types.ts @@ -0,0 +1,18 @@ +import type { PropType, ExtractPropTypes } from 'vue' + +export interface TreeItem { + label: string + children: TreeData + [key: string]: any +} + +export type TreeData = Array; + +export const treeProps = { + data: { + type: Array as PropType, + default: () => [], + } +} as const + +export type TreeProps = ExtractPropTypes diff --git a/devui/tree/src/tree.scss b/devui/tree/src/tree.scss new file mode 100644 index 00000000..0d7f4e4d --- /dev/null +++ b/devui/tree/src/tree.scss @@ -0,0 +1,3 @@ +.d-tree { + // +} diff --git a/devui/tree/src/tree.tsx b/devui/tree/src/tree.tsx new file mode 100644 index 00000000..248b17af --- /dev/null +++ b/devui/tree/src/tree.tsx @@ -0,0 +1,22 @@ +import './tree.scss' + +import { defineComponent, toRefs } from 'vue' +import { treeProps, TreeProps } from './tree-types' + +export default defineComponent({ + name: 'DTree', + props: treeProps, + emits: [], + setup(props: TreeProps, ctx) { + const { data } = toRefs(props) + console.log('data:', data, data.value) + + return () => { + return
{ + data.value.map(item => { + return
{item.label}
+ }) + }
+ } + } +}) diff --git a/sites/components/tree/data.ts b/sites/components/tree/data.ts new file mode 100644 index 00000000..c47ddfb1 --- /dev/null +++ b/sites/components/tree/data.ts @@ -0,0 +1,35 @@ +export default [{ + label: '一级 1', + children: [{ + label: '二级 1-1', + children: [{ + label: '三级 1-1-1' + }] + }] +}, { + label: '一级 2', + children: [{ + label: '二级 2-1', + children: [{ + label: '三级 2-1-1' + }] + }, { + label: '二级 2-2', + children: [{ + label: '三级 2-2-1' + }] + }] +}, { + label: '一级 3', + children: [{ + label: '二级 3-1', + children: [{ + label: '三级 3-1-1' + }] + }, { + label: '二级 3-2', + children: [{ + label: '三级 3-2-1' + }] + }] +}]; diff --git a/sites/components/tree/index.md b/sites/components/tree/index.md new file mode 100644 index 00000000..2369be78 --- /dev/null +++ b/sites/components/tree/index.md @@ -0,0 +1,66 @@ +# Tree 树 + +一种表现嵌套结构的组件。 + +### 何时使用 + +文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。 + +:::demo + +```vue + + +``` + +::: + + -- Gitee From d6191728cab664c8783dae739de8fa33eaab9656 Mon Sep 17 00:00:00 2001 From: kagol Date: Sat, 18 Sep 2021 20:57:30 +0800 Subject: [PATCH 2/6] =?UTF-8?q?feat(tree):=20=E5=A2=9E=E5=8A=A0=E6=95=B0?= =?UTF-8?q?=E6=8D=AE=E7=BB=93=E6=9E=84=E6=8B=8D=E5=B9=B3=E7=9A=84=E9=80=BB?= =?UTF-8?q?=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/tree/src/tree-types.ts | 3 ++- devui/tree/src/tree.tsx | 22 +++++++++++++--------- devui/tree/src/util.ts | 11 +++++++++++ sites/components/tree/index.md | 14 +++++++++++++- 4 files changed, 39 insertions(+), 11 deletions(-) create mode 100644 devui/tree/src/util.ts diff --git a/devui/tree/src/tree-types.ts b/devui/tree/src/tree-types.ts index 2c0e50de..1af7c611 100644 --- a/devui/tree/src/tree-types.ts +++ b/devui/tree/src/tree-types.ts @@ -6,11 +6,12 @@ export interface TreeItem { [key: string]: any } -export type TreeData = Array; +export type TreeData = Array export const treeProps = { data: { type: Array as PropType, + required: true, default: () => [], } } as const diff --git a/devui/tree/src/tree.tsx b/devui/tree/src/tree.tsx index 248b17af..def14679 100644 --- a/devui/tree/src/tree.tsx +++ b/devui/tree/src/tree.tsx @@ -1,22 +1,26 @@ -import './tree.scss' - import { defineComponent, toRefs } from 'vue' import { treeProps, TreeProps } from './tree-types' +import { flatten } from './util' +import './tree.scss' export default defineComponent({ name: 'DTree', props: treeProps, emits: [], - setup(props: TreeProps, ctx) { + setup(props: TreeProps) { const { data } = toRefs(props) - console.log('data:', data, data.value) + const flatData = flatten(data.value) return () => { - return
{ - data.value.map(item => { - return
{item.label}
- }) - }
+ return ( +
+ { + flatData.map(item => ( +
{item.label}
+ )) + } +
+ ) } } }) diff --git a/devui/tree/src/util.ts b/devui/tree/src/util.ts new file mode 100644 index 00000000..0c2c5034 --- /dev/null +++ b/devui/tree/src/util.ts @@ -0,0 +1,11 @@ +export const omit = (obj: unknown, key: string): unknown => { + return Object.entries(obj) + .filter(item => item[0] !== key) + .reduce((acc, item) => Object.assign({}, acc, { [item[0]]: item[1] }), {}) +} + +export const flatten = (tree: Array, key = 'children'): Array => { + return tree.reduce((acc, item) => ( + !item[key] ? acc.concat(item) : acc.concat(omit(item, key), flatten(item[key], key)) + ), []) +} diff --git a/sites/components/tree/index.md b/sites/components/tree/index.md index 2369be78..69462d15 100644 --- a/sites/components/tree/index.md +++ b/sites/components/tree/index.md @@ -12,6 +12,7 @@ +