树组件可设置树节点是否可拖动

fgt1t5y · Oct 14, 2024 · 5397446 · 5397446
1 parent bb73e83
commit 5397446
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/src/components/Tree.vue b/src/components/Tree.vue
@@ -12,6 +12,7 @@
       :group-type="groupType"
       :prev-path="item[labelField]"
       :label-field="labelField"
+      :draggable="draggable"
       @node-click="onNodeClick"
       @node-drag="onNodeDrag"
       @rename="onRename"
@@ -29,11 +30,19 @@ defineOptions({
   name: "Tree",
 });
 
-const props = defineProps<{
-  items: TreeItem[];
-  groupType: string;
-  labelField: string;
-}>();
+const props = withDefaults(
+  defineProps<{
+    items: TreeItem[];
+    groupType?: string;
+    labelField?: string;
+    draggable?: boolean;
+  }>(),
+  {
+    groupType: "group",
+    labelField: "name",
+    draggable: false,
+  }
+);
 
 const emits = defineEmits<{
   (e: "node-click", node: TreeItem, event: MouseEvent): void;

diff --git a/src/components/TreeNode.vue b/src/components/TreeNode.vue
@@ -9,7 +9,7 @@
     :title="items.label"
     :data-id="items.id"
     :data-type="items.type"
-    :draggable="!isRenaming"
+    :draggable="draggable && !isRenaming"
     @contextmenu="emits('node-click', items, $event)"
     @dragstart="onDragStart"
     @dragenter="onDragEnter"
@@ -48,8 +48,9 @@
       :highlighted-item="highlightedItem"
       :renaming-item="renamingItem"
       :group-type="groupType"
-      :prev-path="`${prevPath}/${item.label}`"
+      :prev-path="`${prevPath}/${item[labelField]}`"
       :label-field="labelField"
+      :draggable="draggable"
       @node-click="onNodeClick"
       @node-drag="onNodeDrag"
       @rename="onNodeRename"
@@ -72,11 +73,12 @@ const props = defineProps<{
   level: number;
   expandedItems: IDs;
   selectedItems: IDs;
-  highlightedItem?: number;
-  renamingItem?: number;
   groupType: string;
   prevPath: string;
   labelField: string;
+  highlightedItem?: number;
+  renamingItem?: number;
+  draggable?: boolean;
 }>();
 
 const emits = defineEmits<{

diff --git a/src/views/MainView.vue b/src/views/MainView.vue
@@ -34,7 +34,7 @@
           v-model:highlighted-item="tabs.current"
           v-model:renaming-item="renamingFileTreeNode"
           group-type="folder"
-          label-field="name"
+          draggable
           @node-click="fileTreeNodeClick"
           @node-move="fileTreeNodeMove"
           @rename="fileTreeNodeRename"