超棒 Vue 思维导图组件Vue-Mindmap-技术文章-思凡资源网

超棒 Vue 思维导图组件Vue-Mindmap

今天给小伙伴们推荐一个超逼格的vue.js思维脑图组件VueMindMap。

vue-mindmap 一款基于 vue+d3.js 构建的思维流程图组件。支持缩放、拖动、鼠标右键及导出JSON或Markdown格式文件等功能。

安装

$ npm i @hellowuxin/mindmap -S

使用插件



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

export default {
  components: {
    mindmap
  },
  data:{
    mindmapData: [{
      "name": "如何学习mindmap",
      "children": [
        {
          "name": "基础知识",
          "children": [
            {"name":"HTML & CSS", "children": []},
            {"name":"JavaScript", "children": []},
          ]
        },
        {
          "name":"安装",
          "children": []
        },
        {
          "name":"入门",
          "children": []
        },
        {
          "name":"进阶",
          "children": []
        },
        ...
      ]
    }]
  }
}
</script>

参数配置/键盘事件

放送上精美示例及仓库地址

# 示例地址
https://mindnode.5xin.xyz/

# 仓库地址
https://github.com/hellowuxin/mindmap

希望以上分享对大家有些许帮助。如果小伙伴们有其它Vue思维流程图组件，欢迎留言交流哈！