From 656c6e3ee79c0b34603e16016133398c0103a711 Mon Sep 17 00:00:00 2001 From: sufuwang Date: Sat, 2 Oct 2021 17:23:12 +0800 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20tree=E7=BB=84=E4=BB=B6=20=E9=AB=98?= =?UTF-8?q?=E4=BA=AE=E5=92=8C=E7=A6=81=E9=80=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/tree/src/composables/use-highlight.ts | 45 +++++++++++++++++++++ devui/tree/src/composables/use-toggle.ts | 4 +- devui/tree/src/tree.tsx | 26 ++++++++---- 3 files changed, 65 insertions(+), 10 deletions(-) create mode 100644 devui/tree/src/composables/use-highlight.ts diff --git a/devui/tree/src/composables/use-highlight.ts b/devui/tree/src/composables/use-highlight.ts new file mode 100644 index 00000000..d1d84f2d --- /dev/null +++ b/devui/tree/src/composables/use-highlight.ts @@ -0,0 +1,45 @@ +import { ref, Ref } from 'vue' + +interface TypeHighLightClass { + [key: string]: 'active' | '' | 'isDisabled' +} +type TypeUseHighLightNode = () => { + nodeClassNameRefelct: Ref + handleClickOnNode: (index: string) => void + handleInitNodeClassNameRefelct: (isDisabled: boolean, ...keys: Array) => string +} + +const HightLightClass = 'active' +const IsDisabledFlag = 'isDisabled' +const useHighLightNode: TypeUseHighLightNode = () => { + const nodeClassNameRefelctRef = ref({}) + + const handleInit = (isDisabled = false, ...keys) => { + const key = keys.join('-') + nodeClassNameRefelctRef.value[key] = isDisabled ? IsDisabledFlag : (nodeClassNameRefelctRef.value[key] || '') + return key + } + + const handleClick = (key) => { + if (nodeClassNameRefelctRef.value[key] === IsDisabledFlag) { + return + } + nodeClassNameRefelctRef.value = + Object.fromEntries( + Object + .entries(nodeClassNameRefelctRef.value) + .map(([k, v]) => { + if (k !== key) { + return [k, v === IsDisabledFlag ? IsDisabledFlag : ''] + } + return [k, HightLightClass] + }) + ) + } + return { + nodeClassNameRefelct: nodeClassNameRefelctRef, + handleClickOnNode: handleClick, + handleInitNodeClassNameRefelct: handleInit, + } +} +export default useHighLightNode diff --git a/devui/tree/src/composables/use-toggle.ts b/devui/tree/src/composables/use-toggle.ts index f2480024..632218d1 100644 --- a/devui/tree/src/composables/use-toggle.ts +++ b/devui/tree/src/composables/use-toggle.ts @@ -11,9 +11,9 @@ export default function useToggle(data: unknown): any { const openedData = ref(openedTree(data)) - const toggle = (item) => { + const toggle = (target, item) => { + target.stopPropagation() if (!item.children) return - item.open = !item.open openedData.value = openedTree(data) } diff --git a/devui/tree/src/tree.tsx b/devui/tree/src/tree.tsx index bae27917..ef95ab95 100644 --- a/devui/tree/src/tree.tsx +++ b/devui/tree/src/tree.tsx @@ -2,6 +2,7 @@ import { defineComponent, toRefs } from 'vue' import { treeProps, TreeProps } from './tree-types' import { flatten } from './util' import useToggle from './composables/use-toggle' +import useHighLightNode from './composables/use-highlight' import IconOpen from './assets/open.svg' import IconClose from './assets/close.svg' import './tree.scss' @@ -15,26 +16,36 @@ export default defineComponent({ const flatData = flatten(data.value) const { openedData, toggle } = useToggle(data.value) + const { nodeClassNameRefelct, handleInitNodeClassNameRefelct, handleClickOnNode } = useHighLightNode() const Indent = () => { return } const renderNode = (item) => { + // 现在数据里面没有 key , 未来做优化需要 key 值嘛? + const { key = '', label, disabled, open, level, children } = item + const nodeId = handleInitNodeClassNameRefelct(disabled, key, label) return (
toggle(item)} + class={['devui-tree-node', open && 'devui-tree-node__open']} + style={{ paddingLeft: `${24 * (level - 1)}px` }} > -
+
handleClickOnNode(nodeId)} + >
{ - item.children - ? item.open ? : + children + ? open + ? toggle(target, item)} /> + : toggle(target, item)} /> : } - { item.label } + + { label } +
@@ -42,7 +53,6 @@ export default defineComponent({ } const renderTree = (tree) => { - return tree.map(item => { if (!item.children) { return renderNode(item) -- Gitee From 73e029a4136f47fd2b240ba1677b4e1b5b5d2e5d Mon Sep 17 00:00:00 2001 From: sufuwang Date: Sat, 2 Oct 2021 19:08:02 +0800 Subject: [PATCH 2/6] fix: useHighLightNodeH --> useHighlightNode --- devui/tree/src/composables/use-highlight.ts | 12 ++++++------ devui/tree/src/tree.tsx | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/devui/tree/src/composables/use-highlight.ts b/devui/tree/src/composables/use-highlight.ts index d1d84f2d..82a9f1c2 100644 --- a/devui/tree/src/composables/use-highlight.ts +++ b/devui/tree/src/composables/use-highlight.ts @@ -1,18 +1,18 @@ import { ref, Ref } from 'vue' -interface TypeHighLightClass { +interface TypeHighlightClass { [key: string]: 'active' | '' | 'isDisabled' } -type TypeUseHighLightNode = () => { - nodeClassNameRefelct: Ref +type TypeUseHighlightNode = () => { + nodeClassNameRefelct: Ref handleClickOnNode: (index: string) => void handleInitNodeClassNameRefelct: (isDisabled: boolean, ...keys: Array) => string } const HightLightClass = 'active' const IsDisabledFlag = 'isDisabled' -const useHighLightNode: TypeUseHighLightNode = () => { - const nodeClassNameRefelctRef = ref({}) +const useHighlightNode: TypeUseHighlightNode = () => { + const nodeClassNameRefelctRef = ref({}) const handleInit = (isDisabled = false, ...keys) => { const key = keys.join('-') @@ -42,4 +42,4 @@ const useHighLightNode: TypeUseHighLightNode = () => { handleInitNodeClassNameRefelct: handleInit, } } -export default useHighLightNode +export default useHighlightNode diff --git a/devui/tree/src/tree.tsx b/devui/tree/src/tree.tsx index ef95ab95..98f7be48 100644 --- a/devui/tree/src/tree.tsx +++ b/devui/tree/src/tree.tsx @@ -2,7 +2,7 @@ import { defineComponent, toRefs } from 'vue' import { treeProps, TreeProps } from './tree-types' import { flatten } from './util' import useToggle from './composables/use-toggle' -import useHighLightNode from './composables/use-highlight' +import useHighlightNode from './composables/use-highlight' import IconOpen from './assets/open.svg' import IconClose from './assets/close.svg' import './tree.scss' @@ -16,7 +16,7 @@ export default defineComponent({ const flatData = flatten(data.value) const { openedData, toggle } = useToggle(data.value) - const { nodeClassNameRefelct, handleInitNodeClassNameRefelct, handleClickOnNode } = useHighLightNode() + const { nodeClassNameRefelct, handleInitNodeClassNameRefelct, handleClickOnNode } = useHighlightNode() const Indent = () => { return -- Gitee From e2c9ef66a8224b795af056c259ba5d2904cc1ec7 Mon Sep 17 00:00:00 2001 From: sufuwang Date: Sun, 3 Oct 2021 10:34:57 +0800 Subject: [PATCH 3/6] fix: detail --- devui/tree/src/composables/use-highlight.ts | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/devui/tree/src/composables/use-highlight.ts b/devui/tree/src/composables/use-highlight.ts index 82a9f1c2..5272b2d9 100644 --- a/devui/tree/src/composables/use-highlight.ts +++ b/devui/tree/src/composables/use-highlight.ts @@ -1,7 +1,7 @@ import { ref, Ref } from 'vue' interface TypeHighlightClass { - [key: string]: 'active' | '' | 'isDisabled' + [key: string]: 'active' | '' | 'devui-tree_isDisabledNode' } type TypeUseHighlightNode = () => { nodeClassNameRefelct: Ref @@ -10,7 +10,7 @@ type TypeUseHighlightNode = () => { } const HightLightClass = 'active' -const IsDisabledFlag = 'isDisabled' +const IsDisabledFlag = 'devui-tree_isDisabledNode' const useHighlightNode: TypeUseHighlightNode = () => { const nodeClassNameRefelctRef = ref({}) @@ -28,12 +28,7 @@ const useHighlightNode: TypeUseHighlightNode = () => { Object.fromEntries( Object .entries(nodeClassNameRefelctRef.value) - .map(([k, v]) => { - if (k !== key) { - return [k, v === IsDisabledFlag ? IsDisabledFlag : ''] - } - return [k, HightLightClass] - }) + .map(([k]) => [k, k !== key ? '' : HightLightClass]) ) } return { -- Gitee From 780731f8b0fc99885ebcde1e3c43bf756f9a9300 Mon Sep 17 00:00:00 2001 From: sufuwang Date: Sun, 3 Oct 2021 10:39:45 +0800 Subject: [PATCH 4/6] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=91=BD=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/tree/src/composables/use-highlight.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/devui/tree/src/composables/use-highlight.ts b/devui/tree/src/composables/use-highlight.ts index 5272b2d9..21ebc2b0 100644 --- a/devui/tree/src/composables/use-highlight.ts +++ b/devui/tree/src/composables/use-highlight.ts @@ -9,7 +9,7 @@ type TypeUseHighlightNode = () => { handleInitNodeClassNameRefelct: (isDisabled: boolean, ...keys: Array) => string } -const HightLightClass = 'active' +const HighlightClass = 'active' const IsDisabledFlag = 'devui-tree_isDisabledNode' const useHighlightNode: TypeUseHighlightNode = () => { const nodeClassNameRefelctRef = ref({}) @@ -28,7 +28,7 @@ const useHighlightNode: TypeUseHighlightNode = () => { Object.fromEntries( Object .entries(nodeClassNameRefelctRef.value) - .map(([k]) => [k, k !== key ? '' : HightLightClass]) + .map(([k]) => [k, k !== key ? '' : HighlightClass]) ) } return { -- Gitee From 3832f1ec74ee0b686e61d0b7cba5429eb643a6cf Mon Sep 17 00:00:00 2001 From: sufuwang Date: Sun, 3 Oct 2021 12:00:28 +0800 Subject: [PATCH 5/6] fix: detail --- devui/tree/src/composables/use-highlight.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/devui/tree/src/composables/use-highlight.ts b/devui/tree/src/composables/use-highlight.ts index 21ebc2b0..777d690d 100644 --- a/devui/tree/src/composables/use-highlight.ts +++ b/devui/tree/src/composables/use-highlight.ts @@ -28,7 +28,7 @@ const useHighlightNode: TypeUseHighlightNode = () => { Object.fromEntries( Object .entries(nodeClassNameRefelctRef.value) - .map(([k]) => [k, k !== key ? '' : HighlightClass]) + .map(([k]) => [k, k === key ? HighlightClass : '']) ) } return { -- Gitee From dfd072e19fc48536d404a80fc9e8cf94fffd1873 Mon Sep 17 00:00:00 2001 From: sufuwang Date: Sun, 3 Oct 2021 17:14:34 +0800 Subject: [PATCH 6/6] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=B8=B8=E9=87=8F?= =?UTF-8?q?=E5=91=BD=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/tree/src/composables/use-highlight.ts | 26 ++++++++++----------- devui/tree/src/tree.tsx | 6 ++--- 2 files changed, 15 insertions(+), 17 deletions(-) diff --git a/devui/tree/src/composables/use-highlight.ts b/devui/tree/src/composables/use-highlight.ts index 777d690d..5874f66f 100644 --- a/devui/tree/src/composables/use-highlight.ts +++ b/devui/tree/src/composables/use-highlight.ts @@ -4,37 +4,35 @@ interface TypeHighlightClass { [key: string]: 'active' | '' | 'devui-tree_isDisabledNode' } type TypeUseHighlightNode = () => { - nodeClassNameRefelct: Ref + nodeClassNameReflect: Ref handleClickOnNode: (index: string) => void - handleInitNodeClassNameRefelct: (isDisabled: boolean, ...keys: Array) => string + handleInitNodeClassNameReflect: (isDisabled: boolean, ...keys: Array) => string } -const HighlightClass = 'active' -const IsDisabledFlag = 'devui-tree_isDisabledNode' +const HIGHLIGHT_CLASS = 'active' +const IS_DISABLED_FLAG = 'devui-tree_isDisabledNode' const useHighlightNode: TypeUseHighlightNode = () => { - const nodeClassNameRefelctRef = ref({}) - + const nodeClassNameReflectRef = ref({}) const handleInit = (isDisabled = false, ...keys) => { const key = keys.join('-') - nodeClassNameRefelctRef.value[key] = isDisabled ? IsDisabledFlag : (nodeClassNameRefelctRef.value[key] || '') + nodeClassNameReflectRef.value[key] = isDisabled ? IS_DISABLED_FLAG : (nodeClassNameReflectRef.value[key] || '') return key } - const handleClick = (key) => { - if (nodeClassNameRefelctRef.value[key] === IsDisabledFlag) { + if (nodeClassNameReflectRef.value[key] === IS_DISABLED_FLAG) { return } - nodeClassNameRefelctRef.value = + nodeClassNameReflectRef.value = Object.fromEntries( Object - .entries(nodeClassNameRefelctRef.value) - .map(([k]) => [k, k === key ? HighlightClass : '']) + .entries(nodeClassNameReflectRef.value) + .map(([k]) => [k, k === key ? HIGHLIGHT_CLASS : '']) ) } return { - nodeClassNameRefelct: nodeClassNameRefelctRef, + nodeClassNameReflect: nodeClassNameReflectRef, handleClickOnNode: handleClick, - handleInitNodeClassNameRefelct: handleInit, + handleInitNodeClassNameReflect: handleInit, } } export default useHighlightNode diff --git a/devui/tree/src/tree.tsx b/devui/tree/src/tree.tsx index 98f7be48..17173f72 100644 --- a/devui/tree/src/tree.tsx +++ b/devui/tree/src/tree.tsx @@ -16,7 +16,7 @@ export default defineComponent({ const flatData = flatten(data.value) const { openedData, toggle } = useToggle(data.value) - const { nodeClassNameRefelct, handleInitNodeClassNameRefelct, handleClickOnNode } = useHighlightNode() + const { nodeClassNameReflect, handleInitNodeClassNameReflect, handleClickOnNode } = useHighlightNode() const Indent = () => { return @@ -25,14 +25,14 @@ export default defineComponent({ const renderNode = (item) => { // 现在数据里面没有 key , 未来做优化需要 key 值嘛? const { key = '', label, disabled, open, level, children } = item - const nodeId = handleInitNodeClassNameRefelct(disabled, key, label) + const nodeId = handleInitNodeClassNameReflect(disabled, key, label) return (
handleClickOnNode(nodeId)} >
-- Gitee