From e849a40c4f248990a02f869905f79bc536945e4b Mon Sep 17 00:00:00 2001 From: wanchun <445436867@qq.com> Date: Mon, 19 Jun 2023 11:37:24 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20Tree=E7=BB=84=E4=BB=B6=E9=80=89?= =?UTF-8?q?=E9=A1=B9=E6=94=AF=E6=8C=81=E9=85=8D=E7=BD=AE=E6=98=AF=E5=90=A6?= =?UTF-8?q?=E5=8F=AF=E6=8B=96=E6=8B=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/tree/interface.ts | 1 + components/tree/props.ts | 4 ++-- components/tree/useData.ts | 5 +++-- components/tree/useDrag.ts | 11 ++++++++++- components/tree/useFilter.ts | 1 - components/tree/useSelect.ts | 8 ++++++-- docs/.vitepress/components/tree/index.md | 2 ++ 7 files changed, 24 insertions(+), 8 deletions(-) diff --git a/components/tree/interface.ts b/components/tree/interface.ts index 8295475c..95601e4a 100644 --- a/components/tree/interface.ts +++ b/components/tree/interface.ts @@ -9,6 +9,7 @@ export interface TreeOption { disabled?: boolean; selectable?: boolean; checkable?: boolean; + draggable?: boolean; isLeaf?: boolean; prefix?: string | (() => VNodeChild); suffix?: string | (() => VNodeChild); diff --git a/components/tree/props.ts b/components/tree/props.ts index dd5e593a..fa63e03e 100644 --- a/components/tree/props.ts +++ b/components/tree/props.ts @@ -1,6 +1,6 @@ -import type { ExtractPropTypes, PropType, InjectionKey, Ref } from 'vue'; -import { CHECK_STRATEGY } from './const'; import { extractPropsDefaultValue } from '../_util/utils'; +import { CHECK_STRATEGY } from './const'; +import type { ExtractPropTypes, PropType, InjectionKey, Ref } from 'vue'; import type { TreeOption, diff --git a/components/tree/useData.ts b/components/tree/useData.ts index 063414ad..77992b4a 100644 --- a/components/tree/useData.ts +++ b/components/tree/useData.ts @@ -1,8 +1,8 @@ import { ref, watch } from 'vue'; -import { isNil } from 'lodash-es'; +import { isNil, isUndefined } from 'lodash-es'; +import { concat } from '../_util/utils'; import type { InnerTreeOption, TreeNodeKey } from './interface'; import type { TreeProps } from './props'; -import { concat } from '../_util/utils'; let uid = 1; const getUid = () => { @@ -51,6 +51,7 @@ export default ({ props, emit }: { props: TreeProps; emit: any }) => { disabled: item.disabled, selectable: item.selectable, checkable: item.checkable, + draggable: isUndefined(item.draggable) ? true : item.draggable, value, label, isLeaf, diff --git a/components/tree/useDrag.ts b/components/tree/useDrag.ts index 6ba6db2f..26a5c850 100644 --- a/components/tree/useDrag.ts +++ b/components/tree/useDrag.ts @@ -1,6 +1,6 @@ import { onUnmounted, ref } from 'vue'; -import type { InnerTreeOption, TreeNodeKey, DropPosition } from './interface'; import getPrefixCls from '../_util/getPrefixCls'; +import type { InnerTreeOption, TreeNodeKey, DropPosition } from './interface'; const prefixCls = getPrefixCls('tree-node'); @@ -35,6 +35,11 @@ export default ({ const handleDragstart = (value: TreeNodeKey, event: DragEvent) => { const node = nodeList.get(value); + console.log(node.draggable, node); + if (!node.draggable) { + event.preventDefault(); + return; + } dragNode = node; emit('dragstart', { node, event }); }; @@ -42,6 +47,10 @@ export default ({ const handleDragend = (value: TreeNodeKey, event: DragEvent) => { resetDragState(); const node = nodeList.get(value); + if (!node.draggable) { + event.preventDefault(); + return; + } emit('dragend', { node, event }); }; diff --git a/components/tree/useFilter.ts b/components/tree/useFilter.ts index e6844cea..1961b597 100644 --- a/components/tree/useFilter.ts +++ b/components/tree/useFilter.ts @@ -1,6 +1,5 @@ import { ref, Ref } from 'vue'; import { isFunction } from 'lodash-es'; - import type { TreeNodeKey, InnerTreeOption } from './interface'; import type { TreeProps } from './props'; diff --git a/components/tree/useSelect.ts b/components/tree/useSelect.ts index 476be2a3..45db2890 100644 --- a/components/tree/useSelect.ts +++ b/components/tree/useSelect.ts @@ -25,12 +25,16 @@ export default ({ const index = values.indexOf(val); if (props.multiple) { if (index !== -1) { - props.cancelable && values.splice(index, 1); + if (props.cancelable) { + values.splice(index, 1); + } } else { values.push(val); } } else if (index !== -1) { - props.cancelable && values.splice(index, 1); + if (props.cancelable) { + values.splice(index, 1); + } } else { values[0] = val; } diff --git a/docs/.vitepress/components/tree/index.md b/docs/.vitepress/components/tree/index.md index bccdee87..73230768 100644 --- a/docs/.vitepress/components/tree/index.md +++ b/docs/.vitepress/components/tree/index.md @@ -63,6 +63,7 @@ app.use(FTree); 通过关键字过滤树节点。 --FILTER + ### 前缀与后缀 放一些操作。 @@ -138,6 +139,7 @@ app.use(FTree); | disabled? | 是否禁用节点 | boolean | `-` | | selectable? | 是否禁用选中节点，默认为`Tree`组件的`selectable` | boolean | `-` | | checkable? | 是否禁用勾选节点，默认为`Tree`组件的`checkable` | boolean | `-` | +| draggable? | 节点是否能被拖拽，默认为true | boolean | `true` | | isLeaf? | 节点是否是叶节点，在 remote 模式下是必须的 | boolean | `false` | | prefix? | 节点的前缀 | string / (() => VNodeChild) | `null` | | suffix? | 节点的后缀 | string / (() => VNodeChild) | `null` | From d11a68ada0e2b99a44db701c88720382ff484507 Mon Sep 17 00:00:00 2001 From: wanchun <445436867@qq.com> Date: Mon, 19 Jun 2023 12:32:35 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E5=8E=BB=E6=8E=89=E6=97=A5=E5=BF=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/tree/useDrag.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/tree/useDrag.ts b/components/tree/useDrag.ts index 26a5c850..3cee54a7 100644 --- a/components/tree/useDrag.ts +++ b/components/tree/useDrag.ts @@ -35,8 +35,8 @@ export default ({ const handleDragstart = (value: TreeNodeKey, event: DragEvent) => { const node = nodeList.get(value); - console.log(node.draggable, node); if (!node.draggable) { + // 阻止默认事件，默认事件会有拖拽效果 event.preventDefault(); return; }