dz-mind-map v1.0.3

前言

站在 @hellowuxin/mindmap 肩膀上增加了一些小功能，如上图（如果图片能够正常显示的话）：

• 修改放大缩小倍数，原来的 0.1 - 8 到 0.6, 1.4

• 增加 needEdit props，控制是否可编辑节点（防止与 click 事件冲突）

• click 事件暴露更多数据，比如我这里需要点击节点跳转到新的网页。

• v-model 提取初始绑定的数据并一并暴露出来
• 增加节点定制背景色功能

再次补充一下

该插件只是本人为了完成项目（狠急的项目！！！）中的功能，基于 @hellowuxin/mindmap 做出的极极极为简单的调整，并为了方便维护才发布到 NPM 的，仅限用于学习交流或在demo中使用。如有以上功能需求的，我建议直接向原作者提交 issue。

ISC许可

• ISC许可证是一种开放源代码许可证，在功能上与两句版的BSD许可证相同。

BSD许可

• BSD开源协议（original BSD license、FreeBSD license、Original BSD license）是一个给于使用者很大自由的协议，BSD 代码鼓励代码共享，但需要尊重代码作者的著作权。
• BSD由于允许使用者修改和重新发布代码，也允许使用或在BSD代码上开发商业软件发布和销售，因此是对商业集成很友好的协议。

联系我

帝尊菜鸟

源码

https://gitee.com/dizuncainiao/dz-mind-map

思维导图VUE组件

一个由MindNode启发的思维导图Vue组件，基于d3.js实现
目前实现的功能有基本的编辑、拖移、缩放、撤销、上下文菜单、折叠...

在线演示：https://mindnode.5xin.xyz/

近期更新

• 左键多选

安装

npm install @hellowuxin/mindmap

PROPS

EVENTS

样例

<template>
  <mindmap v-model="data"></mindmap>
</template>

<script>
import mindmap from '@hellowuxin/mindmap'

export default {
  components: { mindmap },
  data: () => ({
    data: [{
      "name":"如何学习D3",
      "children": [
        {
          "name":"预备知识",
          "children": [
            { "name":"HTML & CSS" },
            { "name":"JavaScript" },
            ...
          ]
        },
        {
          "name":"安装",
          "_children": [
            { "name": "折叠节点" }
          ]
        },
        {
          "name":"进阶",
          "left": true
        },
        ...
      ]
    }]
  })
}
</script>

键盘事件

⇥ tab、⏎ enter、⌫ backspace、⌘ cmd+z、⌘ cmd+y

交互逻辑

鼠标：space+左键移动、右键菜单、ctrl+滚轮缩放、左键选中

触控板：双指滚动移动、双指菜单、双指捏合缩放、单指选中

待解决

• 导出多种格式
• 设置节点的宽高
• 多个根节点
• ...