46 lines
1.2 KiB
Markdown
46 lines
1.2 KiB
Markdown
|
# 介绍
|
|||
|
|
|
|||
|
|
本组件是为了在微信小程序上使用树状图而开发，用CSS构建而成，所以体积很小，可以无限层级递归。目前仅能由上到下排列。用的是SCSS，里面的布局、形状都很好修改。只需要传入Data就可以实现递归。但是得自己去修改组件里面的渲染字段。
|
|||
|
|
|
|||
|
|
1.支持无限层级树状图
|
|||
|
|
2 .支持缩放、拖动视图
|
|||
|
|
3.支持点击事件(还未完成，自己去写，非常简单)
|
|||
|
|
4.SCSS绘制，无需其他插件，体积小
|
|||
|
|
5.扩展性强、自由度高
|
|||
|
|
|
|||
|
|
# 代码使用方法
|
|||
|
|
只需要引入并加载 BuTingTree/BuTingTree.vue 就可以了
|
|||
|
|
```javascript
|
|||
|
|
// 调用代码
|
|||
|
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<BuTingTree
|
|||
|
|
:data="member">
|
|||
|
|
</BuTingTree>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import BuTingTree from "@/components/BuTingTree/BuTingTree.vue"
|
|||
|
|
export default {
|
|||
|
|
components:{
|
|||
|
|
BuTingTree
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
member:[]
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# 组件核心代码
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
# 效果预览
|
|||
|
|
|
|||
|
|
|
|||
|
|
|