Vue -思维导图(简单明了,一看就懂~)

使用 `vue-tree-component` 来完成思维导图功能，首先你需要安装这个库。在命令行中运行： ``` npm install vue-tree-component --save ``` 然后，在你的 Vue 项目中创建一个组件并导入该库： ```html <template> <v-tree-manager ref="treeManager" :data="nodes" @node-create="onNodeCreate" @node-update="onNodeUpdate" @node-delete="onNodeDelete"></v-tree-manager> </template> <script> import VTreeManager from 'vue-tree-component'; export default { components: { VTreeManager, }, data() { return { nodes: [], // 初始的思维导图节点数组 }; }, methods: { onNodeCreate(node) { // 当创建新节点时触发的回调 console.log('新节点创建:', node); }, onNodeUpdate(updatedNode) { // 节点更新时触发 console.log('节点更新:', updatedNode); }, onNodeDelete(deletedNode) { // 节点删除时触发 console.log('节点删除:', deletedNode); }, }, }; </script> ``` 接下来，你需要定义节点的基本结构和样式，并通过 `nodes` 数据来控制思维导图的状态。在这个组件中，你可以通过 API 操作节点，如添加、修改或删除节点： ```javascript // 初始化节点数据 data() { return { nodes: [ { id: 0, label: '根节点', children: [], }, ], }; }, ```