You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.8 KiB
67 lines
1.8 KiB
<script setup lang="ts">
|
|
import { ref, useSlots } from "vue"
|
|
import { convertTreeData, ENiuTreeStatus, INiuTreeData } from "@princess-ui/components/tree"
|
|
// import "@princess-ui/theme-chalk/dist/ps-tree.css"
|
|
|
|
const list = ref(convertTreeData([
|
|
{
|
|
key: 1,
|
|
title: "aaa",
|
|
children: [
|
|
{
|
|
key: 5,
|
|
title: "5文件夹",
|
|
children: []
|
|
},
|
|
]
|
|
},
|
|
{
|
|
key: 2,
|
|
title: "ccc"
|
|
},
|
|
{
|
|
key: 3,
|
|
title: "bbb"
|
|
},
|
|
]))
|
|
function onExpand(node: INiuTreeData) {
|
|
console.log(node);
|
|
|
|
}
|
|
const dropFn = (status: ENiuTreeStatus, data: INiuTreeData<any>, targetData: INiuTreeData<any>): Promise<boolean> => {
|
|
return new Promise((resolve) => {
|
|
setTimeout(() => {
|
|
resolve(true)
|
|
}, 2000);
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Panel name="Tree" desc="普通的树形结构">
|
|
<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>
|
|
</Panel>
|
|
<Panel name="Tree" desc="延迟2000ms执行操作">
|
|
<ps-tree sort @expand="onExpand" :dropFn="dropFn" :list="list" auto-expand>
|
|
<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>
|
|
</Panel>
|
|
</template>
|
|
|