推荐一个VUE开发的思维导图组件Vue-Mindmap

2020-07-14 08:07:21 执剑追风 113 前端开发 / VUE

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

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

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

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

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


安装

$ npm i @hellowuxin/mindmap -S

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


使用插件

<template>
  <div id="app">
    <mindmap
      v-model="mindmapData"
      xSpacing="100"
      ySpacing="50"
      strokeWidth="6"
      draggable="{{false}}"
    >
    </mindmap>
  </div>
</template>

<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>

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


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


参数配置/键盘事件

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


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


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

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

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