修改

packages/components/button/button.vue

@@ -1,19 +1,12 @@
 <template>
-    <div>ffffffffffff-{{ test }}</div>
+    <div>ffffffffffff</div>
 </template>
 
-<script lang="ts">
-export default defineComponent({
-    name: "ps-button"
-})
-</script>
-
 <script lang="ts" setup>
 import { defineComponent, onBeforeUnmount, ref } from "vue"
 const props = defineProps<{
     test: string
 }>()
-console.log(props);
 
 const emits = defineEmits<{
 

packages/components/button/index.ts

@@ -1,8 +1,9 @@
 import { App } from "vue"
 import PsButton from "./button.vue"
 
+PsButton.name="ps-button"
 PsButton.install = function(app: App) {
-    app.component(PsButton.name || "ps-button", PsButton)
+    app.component(PsButton.name, PsButton)
 }
 
 export {

packages/components/captcha/captcha.vue

@@ -8,14 +8,8 @@
     </div>
 </template>
 
-<script lang="ts">
-export default defineComponent({
-    name: "ps-captcha"
-})
-</script>
-
 <script lang="ts" setup>
-import { defineComponent, onBeforeUnmount, ref } from "vue"
+import { onBeforeUnmount, ref } from "vue"
 const props = withDefaults(
     defineProps<{
         duration?: number

packages/components/captcha/index.ts

@@ -1,8 +1,9 @@
 import { App } from "vue"
 import PsCaptcha from "./captcha.vue"
 
+PsCaptcha.name = "ps-captcha"
 PsCaptcha.install = function(app: App) {
-    app.component(PsCaptcha.name || "ps-captcha", PsCaptcha)
+    app.component(PsCaptcha.name, PsCaptcha)
 }
 
 export {

packages/components/tree/index.ts

@@ -4,8 +4,9 @@ import PsTree from "./tree.vue"
 export * from "./util"
 export * from "./type"
 
+PsTree.name = "ps-tree"
 PsTree.install = function(app: App) {
-    app.component(PsTree.name || "ps-tree", PsTree)
+    app.component(PsTree.name, PsTree)
 }
 
 export {

packages/components/tree/node.vue

@@ -11,44 +11,39 @@
                 }">
                     {{ data.title }} - {{ level * 10 + 'px' }}
                 </div>
-                <NiuTreeDrag v-bind="props" :status="status" :style="{
-                    marginLeft: level * 10 + 'px',
-                }"></NiuTreeDrag>
             </slot>
+            <div :style="{ marginLeft: level * 10 + 'px' }" :class="[
+                {
+                    'ps-tree-drag-up':
+                        dataSourceKey != data.key &&
+                        dataSourceKey != undefined &&
+                        !isChildOf(data.key, dataSourceKey, list) &&
+                        status === ENiuTreeStatus.DragUp,
+                    'ps-tree-drag-in':
+                        dataSourceKey != data.key &&
+                        dataSourceKey &&
+                        !isChildOf(data.key, dataSourceKey, list) &&
+                        status === ENiuTreeStatus.DragIn,
+                    'ps-tree-drag-down':
+                        dataSourceKey != data.key &&
+                        dataSourceKey &&
+                        !isChildOf(data.key, dataSourceKey, list) &&
+                        status === ENiuTreeStatus.DragDown,
+                },
+            ]"></div>
         </div>
         <div class="ps-tree-sub-node" v-if="(opts.justOpen || data.isExpand) && data.children && data.children.length">
-            <template v-for="(item, index) in data.children" :key="item.key">
+            <slot name="children" :datalist="data.children" :level="level + 1" :status="status">
-                <node @onDragstart="(e: INiuTreeKey) => emit('onDragstart', e)"
-                    @onDragend="(e: INiuTreeKey) => emit('onDragend', e)"
-                    @onDrop="(e: INiuTreeKey, s?: ENiuTreeStatus) => emit('onDrop', e, s)"
-                    @onDragover="(e: INiuTreeKey) => emit('onDragover', e)"
-                    @onDragleave="(e: INiuTreeKey) => emit('onDragleave', e)"
-                    @click="(e: INiuTreeData) => emit('click', e)" :data-source-key="dataSourceKey" :data="item"
-                    :list="list" :level="level + 1">
-                    <template
-                        #default="{ data, deep, dataSourceKey, status }: { data: INiuTreeData, deep: number, dataSourceKey: INiuTreeKey, status: ENiuTreeStatus }">
-                        <slot :data="data" :deep="deep" :dataSourceKey="dataSourceKey" :status="status">
-                            <div :style="{
-                                marginLeft: deep * 10 + 'px',
-                                'position': 'relative',
-                                zIndex: 10
-                            }">
-                                {{ data.title }} - {{ deep * 10 + 'px' }}
-                            </div>
-                            <NiuTreeDrag v-bind="props" :status="status" :style="{
-                                marginLeft: deep * 10 + 'px',
-                            }"></NiuTreeDrag>
             </slot>
-                    </template>
-                </node>
-            </template>
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
+import node from './node.vue'
+import { inject, ref, provide, useSlots } from 'vue'
 import { isChildOf } from './util'
-import NiuTreeDrag from './tree-drag.vue';
+import TreeDrag from './tree-drag.vue';
 import { ENiuTreeStatus, INiuTreeData, INiuTreeKey } from './type';
 const props = withDefaults(
     defineProps<{
@@ -61,6 +56,7 @@ const props = withDefaults(
         level: 0,
     }
 )
+
 const opts = inject("tree:opts", {
     justOpen: false
 })
@@ -146,9 +142,3 @@ function onDragleave() {
     emit('onDragleave', props.data.key)
 }
 </script>
-<script lang="ts">
-import { defineComponent, inject, ref, provide } from 'vue'
-export default defineComponent({
-    name: 'ps-tree-node',
-})
-</script>

packages/components/tree/tree.vue

@@ -7,11 +7,24 @@
                     #default="{ data, deep, dataSourceKey, status }: { data: INiuTreeData, deep: number, dataSourceKey: INiuTreeKey, status: ENiuTreeStatus }">
                     <slot :data="data" :deep="deep" :dataSourceKey="dataSourceKey" :status="status"></slot>
                 </template>
+                <template #children="{datalist, level}">
+                    <template v-for="(item, index) in datalist" :key="index">
+                        <node @onDragstart="onDragstart" @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 }">
+                                <slot :data="data" :deep="deep" :dataSourceKey="dataSourceKey" :status="status"></slot>
+                            </template>
+                        </node>
+                    </template>
+                </template>
             </node>
         </template>
     </div>
 </template>
 <script lang="ts" setup>
+import { provide, ref } from "vue"
+import node from './node.vue'
 import { INiuTreeData, INiuTreeKey, ENiuTreeStatus } from './type'
 import {
     findByKey,
@@ -116,12 +129,4 @@ function onDrop(key: INiuTreeKey, status?: ENiuTreeStatus) {
     dataSourceKey.value = undefined
 }
 </script>
-<script lang="ts">
-import { defineComponent, provide, ref } from "vue"
-import node from './node.vue'
-
-export default defineComponent({
-    name: 'ps-tree',
-})
-</script>
 

packages/components/tree/util.ts

@@ -41,6 +41,8 @@ export function isChildOf(
     b_key: INiuTreeKey,
     treeData: INiuTreeData[]
 ) {
+    if (!a_key) return false
+    if (!b_key) return false
     if (a_key === b_key) return false
 
     let target_node = findByKey(b_key, treeData)

packages/playground/components.d.ts

@@ -8,6 +8,7 @@ declare module '@vue/runtime-core' {
     Panel: typeof import('./src/components/Panel.vue')['default']
     PsButton: typeof import('@princess-ui/components/button')['PsButton']
     PsCaptcha: typeof import('@princess-ui/components/captcha')['PsCaptcha']
+    PsTree: typeof import('@princess-ui/components/tree')['PsTree']
   }
 }
 

packages/playground/src/dev/captcha.vue

@@ -21,7 +21,7 @@ function send(start: () => void, done: (isDone: boolean) => void) {
             <ps-captcha @send="send" border :duration="5">sada</ps-captcha>
         </div>
     </Panel>
-    <Panel name="按钮">
+    <Panel name="按钮ss">
         <ps-button></ps-button>
     </Panel>
 </template>

packages/playground/src/dev/tree.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue"
-import PsTree, { convertTreeData } from "@princess-ui/components/tree"
+import { convertTreeData } from "@princess-ui/components/tree"
 
 const list = ref(convertTreeData([
     {
@@ -26,6 +26,17 @@ const list = ref(convertTreeData([
 
 <template>
     <Panel name="Tree">
-        <ps-tree :list="list"></ps-tree>
+        <ps-tree :list="list">
+            <template #default="{ data, deep }">
+                <div :style="{
+                    marginLeft: deep * 10 + 'px',
+                    'position': 'relative',
+                    zIndex: 10
+                }">
+                    {{ data.isFolder }}-{{ data.title }} 11-22 {{ deep * 10 + 'px' }}
+                </div>
+            </template>
+        </ps-tree>
+        {{ list }}
     </Panel>
 </template>

packages/playground/vite.config.ts

@@ -25,6 +25,8 @@ export default defineConfig({
                     resolve: (componentName: string) => {
                         if (componentName.startsWith('Ps')) {
                             const name = _.lowerFirst(componentName.slice(2))  
+                            console.log(name);
+                             
                             return {
                                 name: componentName,
                                 from: `@princess-ui/components/${name}`,

readme.md

@@ -2,3 +2,5 @@
 - https://zhuanlan.zhihu.com/p/450698973
 - https://github.com/dewfall123/vitepress-for-component/blob/master/package.json
 - https://d.umijs.org/zh-CN
+
+https://rollupjs.org/guide/en/#input