vue-chart-tree v0.1.3

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

treeNodeData

slot

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

License

MIT