vue-chart-tree

vue-chart-tree 是一个特殊布局模式结构的vue Tree组件

Demo

Demo

安装

npm install vue-chart-tree --save

导入

全局导入

import Vue from 'vue'
import VueChartTree from 'vue-chart-tree'
 
Vue.use(VueChartTree)

局部导入

// in ES6 modules
import VueChartTree from 'vue-chart-tree'
 
// in CommonJS
const VueChartTree = require('vue-chart-tree')
 
export default {
  components: {
    VueChartTree
  }
}

script 脚本形式导入

<script src="../node-modules/vue-chart-tree/lib/vue-chart-tree.umd.min.js"></script>

new Vue({
  el: '#app',
  components: {
    'vue-chart-tree': window['vue-chart-tree']
  }
})

用法

组件库本身向外暴露了三个变量:

import VueChartTree, { resetTree, updatePartTree } from 'vue-chart-tree'

VueChartTree 即为组件本身； 当开发者自行定义的 slot节点发生变化时（例如位置、尺寸等发生改变），由开发者主动调用 updatePartTree 进行树状图结构的更新； 如果因为特殊的操作需要重置整个树状图，则可以调用 resetTree 完成, resetTree接收一个 VueChartTree节点作为参数（可以通过 $ref获取）

参见 demo

Options

Props

参数	类型	描述	默认值	是否必须
isRoot	Boolean	是否是整个树状结构的根节点（即 rootNode）	true	否
treeNodeData	Object	当前节点的数据信息	-	是

treeNodeData

参数	类型	描述	默认值	是否必须
children	Array<treeNodeData>	当前节点的子节点	-	否
isOpen	Boolean	当前节点是否是展开(open)状态	-	否
other	any	当前节点相关的其他值，这些值由开发者决定，一般来说是可能会被 slot 使用的值	-	否

slot

组件本身只是构建了一个树状结构，以及基本的交互，树状图上的节点由开发者自行决定，通过一个传入的 default slot 实现，所以具备较大的灵活性 具体用法参见 demo

License

MIT