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..3cee54a7 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); + 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` |