68 lines
1.1 KiB
Vue
68 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<view class="main">
|
||
|
|
<movable-area class="tree" :style="'width:'+screen.width*4+'px;height:'+screen.height*4+'px;'">
|
||
|
|
<movable-view class="canvas" direction="all" out-of-bounds scale :x="screen.width/2">
|
||
|
|
<Node :data="treeData" isTop></Node>
|
||
|
|
</movable-view>
|
||
|
|
</movable-area>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import Node from "./Node.vue"
|
||
|
|
export default {
|
||
|
|
name: 'BuTingTree',
|
||
|
|
props: {
|
||
|
|
data: {
|
||
|
|
type: Array,
|
||
|
|
default: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
components:{
|
||
|
|
Node
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
screen: {
|
||
|
|
height: 1920,
|
||
|
|
width: 1080
|
||
|
|
},
|
||
|
|
treeData: []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
let system = uni.getSystemInfoSync()
|
||
|
|
this.screen = {
|
||
|
|
height: system.screenHeight,
|
||
|
|
width: system.screenWidth
|
||
|
|
}
|
||
|
|
console.log(this.screen)
|
||
|
|
},
|
||
|
|
watch:{
|
||
|
|
data(newData,old){
|
||
|
|
this.treeData = newData
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
|
||
|
|
filterTree(tree) {
|
||
|
|
return tree.map(item => {
|
||
|
|
|
||
|
|
if (item.children.length > 0) {
|
||
|
|
item.children = this.filterTree(item.children)
|
||
|
|
}
|
||
|
|
return item
|
||
|
|
})
|
||
|
|
},
|
||
|
|
onChange(e) {
|
||
|
|
console.log(e)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
|
||
|
|
</style>
|