Browse Source

fixed bug

master
npmrun 3 years ago
parent
commit
484617b88d
  1. 8
      packages/components/tree/node.vue
  2. 1
      packages/components/tree/readme.md
  3. 8
      packages/playground/src/dev/tree.vue

8
packages/components/tree/node.vue

@ -60,7 +60,7 @@
</template> </template>
<script lang="ts" setup> <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 { inject, ref, provide, renderSlot, useSlots, watch, readonly, computed } from 'vue'
import { isChildOf } from './util' import { isChildOf } from './util'
import renderNode from './renderNode' import renderNode from './renderNode'
@ -112,7 +112,7 @@ const emit = defineEmits<{
(e: 'onDragover', key: INiuTreeKey): void (e: 'onDragover', key: INiuTreeKey): void
(e: 'onDragleave', 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 status = ref<ENiuTreeStatus>()
const nodeEL = ref<HTMLDivElement>() const nodeEL = ref<HTMLDivElement>()
provide("draggable", draggable) provide("draggable", draggable)
@ -160,11 +160,11 @@ function onDragover(event: DragEvent) {
return return
const y = event.offsetY const y = event.offsetY
const h = (event.currentTarget as HTMLDivElement).offsetHeight const h = (event.currentTarget as HTMLDivElement).offsetHeight
if (y < h / 3) { if (y < h / 3 && !opts.sort) {
status.value = ENiuTreeStatus.DragUp status.value = ENiuTreeStatus.DragUp
} else if (y <= (h * 2) / 3 && y >= h / 3 && props.data.children) { } else if (y <= (h * 2) / 3 && y >= h / 3 && props.data.children) {
status.value = ENiuTreeStatus.DragIn status.value = ENiuTreeStatus.DragIn
} else if (y > (h * 2) / 3) { } else if (y > (h * 2) / 3 && !opts.sort) {
status.value = ENiuTreeStatus.DragDown status.value = ENiuTreeStatus.DragDown
} else { } else {
status.value = undefined status.value = undefined

1
packages/components/tree/readme.md

@ -0,0 +1 @@
考虑使用事件消息传递数据

8
packages/playground/src/dev/tree.vue

@ -6,7 +6,7 @@ import "@princess-ui/theme-chalk/dist/ps-tree.css"
const list = ref(convertTreeData([ const list = ref(convertTreeData([
{ {
key: 1, key: 1,
title: "1文件夹", title: "aaa",
children: [ children: [
{ {
key: 5, key: 5,
@ -17,11 +17,11 @@ const list = ref(convertTreeData([
}, },
{ {
key: 2, key: 2,
title: "2文件" title: "ccc"
}, },
{ {
key: 3, key: 3,
title: "3文件" title: "bbb"
}, },
])) ]))
function onExpand(node: INiuTreeData) { function onExpand(node: INiuTreeData) {
@ -52,7 +52,7 @@ const dropFn = (status: ENiuTreeStatus, data: INiuTreeData<any>, targetData: INi
</ps-tree> </ps-tree>
</Panel> </Panel>
<Panel name="Tree" desc="延迟2000ms执行操作"> <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 }"> <template #default="{ data, deep }">
<div :style="{ <div :style="{
marginLeft: deep * 10 + 'px', marginLeft: deep * 10 + 'px',

Loading…
Cancel
Save