diff --git a/packages/components/tree/node.vue b/packages/components/tree/node.vue index da6579b..66db489 100644 --- a/packages/components/tree/node.vue +++ b/packages/components/tree/node.vue @@ -60,7 +60,7 @@ </template> <script lang="ts" setup> -import node from './node.vue' +// import node from './node.vue' import { inject, ref, provide, renderSlot, useSlots, watch, readonly, computed } from 'vue' import { isChildOf } from './util' import renderNode from './renderNode' @@ -112,7 +112,7 @@ const emit = defineEmits<{ (e: 'onDragover', key: INiuTreeKey): void (e: 'onDragleave', key: INiuTreeKey): void }>() -const draggable = opts.sort?readonly(ref(false)):ref(true) +const draggable = ref(true) const status = ref<ENiuTreeStatus>() const nodeEL = ref<HTMLDivElement>() provide("draggable", draggable) @@ -160,11 +160,11 @@ function onDragover(event: DragEvent) { return const y = event.offsetY const h = (event.currentTarget as HTMLDivElement).offsetHeight - if (y < h / 3) { + if (y < h / 3 && !opts.sort) { status.value = ENiuTreeStatus.DragUp } else if (y <= (h * 2) / 3 && y >= h / 3 && props.data.children) { status.value = ENiuTreeStatus.DragIn - } else if (y > (h * 2) / 3) { + } else if (y > (h * 2) / 3 && !opts.sort) { status.value = ENiuTreeStatus.DragDown } else { status.value = undefined diff --git a/packages/components/tree/readme.md b/packages/components/tree/readme.md new file mode 100644 index 0000000..954f05b --- /dev/null +++ b/packages/components/tree/readme.md @@ -0,0 +1 @@ +考虑使用事件消息传递数据 \ No newline at end of file diff --git a/packages/playground/src/dev/tree.vue b/packages/playground/src/dev/tree.vue index 2d1b42e..0dce88a 100644 --- a/packages/playground/src/dev/tree.vue +++ b/packages/playground/src/dev/tree.vue @@ -6,7 +6,7 @@ import "@princess-ui/theme-chalk/dist/ps-tree.css" const list = ref(convertTreeData([ { key: 1, - title: "1文件夹", + title: "aaa", children: [ { key: 5, @@ -17,11 +17,11 @@ const list = ref(convertTreeData([ }, { key: 2, - title: "2文件" + title: "ccc" }, { key: 3, - title: "3文件" + title: "bbb" }, ])) function onExpand(node: INiuTreeData) { @@ -52,7 +52,7 @@ const dropFn = (status: ENiuTreeStatus, data: INiuTreeData<any>, targetData: INi </ps-tree> </Panel> <Panel name="Tree" desc="延迟2000ms执行操作"> - <ps-tree @expand="onExpand" :dropFn="dropFn" :list="list" auto-expand> + <ps-tree sort @expand="onExpand" :dropFn="dropFn" :list="list" auto-expand> <template #default="{ data, deep }"> <div :style="{ marginLeft: deep * 10 + 'px',