diff --git a/packages/components/tree/node.vue b/packages/components/tree/node.vue index 9f2cda1..ec3579b 100644 --- a/packages/components/tree/node.vue +++ b/packages/components/tree/node.vue @@ -40,6 +40,7 @@ @onDrop="(e: INiuTreeKey, s?: ENiuTreeStatus)=>emit('onDrop', e, s)" @onDragover="(e: INiuTreeKey)=>emit('onDragover', e)" @onDragleave="(e: INiuTreeKey)=>emit('onDragleave', e)" + @expand="(e: INiuTreeData)=>emit('expand', e)" @click="(e: INiuTreeData)=>emit('click', e)" :data-source-key="dataSourceKey" :data="item" @@ -60,7 +61,7 @@ <script lang="ts" setup> import node from './node.vue' -import { inject, ref, provide, renderSlot, useSlots } from 'vue' +import { inject, ref, provide, renderSlot, useSlots, watch } from 'vue' import { isChildOf } from './util' import renderNode from './renderNode' import type { INiuTreeData, INiuTreeKey } from './type' @@ -79,11 +80,16 @@ const props = withDefaults( const slots = useSlots() const aa = (fuck: any)=>renderSlot(slots, "default", fuck) +watch(()=>props.data.isExpand, ()=>{ + emit("expand", props.data) +}) + const opts = inject("tree:opts", { justOpen: false }) const emit = defineEmits<{ (e: 'click', data: INiuTreeData): void + (e: 'expand', data: INiuTreeData): void (e: 'onDragstart', key: INiuTreeKey): void (e: 'onDragend', key: INiuTreeKey): void (e: 'onDrop', key: INiuTreeKey, status?: ENiuTreeStatus): void diff --git a/packages/components/tree/tree.vue b/packages/components/tree/tree.vue index 1c63be6..f792ceb 100644 --- a/packages/components/tree/tree.vue +++ b/packages/components/tree/tree.vue @@ -1,7 +1,7 @@ <template> <div class="ps-tree component"> <template v-for="(item, index) in list" :key="item.key"> - <node @onDragstart="onDragstart" @onDragEnd="onDragEnd" @onDrop="onDrop" :data-source-key="dataSourceKey" + <node @onDragstart="onDragstart" @expand="onExpand" @onDragEnd="onDragEnd" @onDrop="onDrop" :data-source-key="dataSourceKey" :data="item" :list="list" :level="level" @click="(item) => clickNode(item)"> <template #default="{ data, deep, dataSourceKey, status }: { data: INiuTreeData, deep: number, dataSourceKey: INiuTreeKey, status: ENiuTreeStatus }"> @@ -45,6 +45,10 @@ const slot = useSlots() provide("tree:opts", props) +function onExpand(item: INiuTreeData) { + emit("expand", item) +} + function clickNode(item: INiuTreeData) { if (props.justOpenOne) { forEachTree(props.list, (node: INiuTreeData) => { @@ -60,6 +64,7 @@ function clickNode(item: INiuTreeData) { const emit = defineEmits<{ (e: 'change'): void + (e: 'expand', data: INiuTreeData): void (e: 'itemDragstart'): void }>() @@ -78,17 +83,17 @@ async function onDrop(key: INiuTreeKey, status?: ENiuTreeStatus) { let targetData = findByKey(key, props.list) const sourceKey = dataSourceKey.value; dataSourceKey.value = undefined - const isSuccess = (await props.dropFn?.(status, data, targetData)) - if (isSuccess == undefined || isSuccess) { - switch (status) { - case ENiuTreeStatus.DragIn: - if ( - data && - targetData && - sourceKey != key && - !isChildOf(key, sourceKey, props.list) && - targetData.children - ) { + switch (status) { + case ENiuTreeStatus.DragIn: + if ( + data && + targetData && + sourceKey != key && + !isChildOf(key, sourceKey, props.list) && + targetData.children + ) { + const isSuccess = (await props.dropFn?.(status, data, targetData)) + if (isSuccess == undefined || isSuccess) { removeByKey(sourceKey, props.list) targetData.children.push(data) if (props.autoExpand) { @@ -96,34 +101,40 @@ async function onDrop(key: INiuTreeKey, status?: ENiuTreeStatus) { } emit("change") } - break - case ENiuTreeStatus.DragDown: - // 按索引往列表添加节点 - if ( - data && - targetData && - sourceKey != key && - !isChildOf(key, sourceKey, props.list) - ) { + } + break + case ENiuTreeStatus.DragDown: + // 按索引往列表添加节点 + if ( + data && + targetData && + sourceKey != key && + !isChildOf(key, sourceKey, props.list) + ) { + const isSuccess = (await props.dropFn?.(status, data, targetData)) + if (isSuccess == undefined || isSuccess) { removeByKey(sourceKey, props.list) insertAfterByKey(key, data, props.list) emit("change") } - break - case ENiuTreeStatus.DragUp: - // 按索引往列表添加节点 - if ( - data && - targetData && - sourceKey != key && - !isChildOf(key, sourceKey, props.list) - ) { + } + break + case ENiuTreeStatus.DragUp: + // 按索引往列表添加节点 + if ( + data && + targetData && + sourceKey != key && + !isChildOf(key, sourceKey, props.list) + ) { + const isSuccess = (await props.dropFn?.(status, data, targetData)) + if (isSuccess == undefined || isSuccess) { removeByKey(sourceKey, props.list) insertBeforeByKey(key, data, props.list) emit("change") } - break - } + } + break } } </script> diff --git a/packages/playground/src/dev/tree.vue b/packages/playground/src/dev/tree.vue index 28bfde8..8fbe6f7 100644 --- a/packages/playground/src/dev/tree.vue +++ b/packages/playground/src/dev/tree.vue @@ -24,7 +24,10 @@ const list = ref(convertTreeData([ title: "3" }, ])) +function onExpand(node: INiuTreeData) { + console.log(node); +} const dropFn = (status: ENiuTreeStatus, data: INiuTreeData<any>, targetData: INiuTreeData<any>): Promise<boolean> => { return new Promise((resolve) => { setTimeout(() => { @@ -49,7 +52,7 @@ const dropFn = (status: ENiuTreeStatus, data: INiuTreeData<any>, targetData: INi </ps-tree> </Panel> <Panel name="Tree" desc="延迟2000ms执行操作"> - <ps-tree :dropFn="dropFn" :list="list"> + <ps-tree @expand="onExpand" :dropFn="dropFn" :list="list" auto-expand> <template #default="{ data, deep }"> <div :style="{ marginLeft: deep * 10 + 'px', diff --git a/packages/princess-ui/package.json b/packages/princess-ui/package.json index 6c6c138..d69c6b3 100644 --- a/packages/princess-ui/package.json +++ b/packages/princess-ui/package.json @@ -1,6 +1,6 @@ { "name": "princess-ui", - "version": "0.0.8-beta", + "version": "0.0.8-beta.2", "description": "a vue3 ui, just for personal use", "scripts": { "build": "tsc ./PrincessResolver.ts --skipLibCheck --esModuleInterop"