Mindmap component for Vue2

Overview

思维导图Vue2组件 npm npm

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

近期更新

该项目基本不会再维护
目前正在开发Vue3、d3v6版本的思维导图组件,欢迎支持

安装

npm install @hellowuxin/mindmap

PROPS

Name Type Default Description
v-model Array undefined 设置思维导图数据
width Number 100% 设置组件宽度
height Number undefined 设置组件高度
xSpacing Number 80 设置节点横向间隔
ySpacing Number 20 设置节点纵向间隔
strokeWidth Number 4 设置连线的宽度
draggable Boolean true 设置节点是否可拖拽
gps Boolean true 是否显示居中按钮
fitView Boolean true 是否显示缩放按钮
showNodeAdd Boolean true 是否显示添加节点按钮
keyboard Boolean true 是否响应键盘事件
contextMenu Boolean true 是否响应右键菜单
zoomable Boolean true 是否可缩放、拖移
showUndo Boolean true 是否显示撤销重做按钮
download Boolean true 是否显示下载按钮

EVENTS

Name arguments Description
updateNodeName data, id 更新节点名称时,传入节点数据和节点id
click data, id 点击节点时,传入节点数据和节点id

样例

">
<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+滚轮缩放、左键选中

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

待解决

  • 导出多种格式
  • 设置节点的宽高
  • 多个根节点
  • ...
Issues
  • 双击节点内容后光标的位置如何控制呢

    双击节点内容后光标的位置如何控制呢

    大佬,我想请教一下,目前双击节点内容之后鼠标的光标是在开头的位置,可以外部进行可配置的吗,就是我想双击的时候光标的位置在内容的后面出现

    opened by Ritusan 11
  • 允许节点折叠

    允许节点折叠

    这分两种情况:

    1. 上来给现成的大量数据,这时可允许用户折叠以隐藏某个节点的子节点
    2. 上来给少量数据,折叠时可通过事件,从后端异步加载数据并添加为子节点
    opened by Cat7373 7
  • 谢谢大神,还是有一些问题,当某一级节点有很多的时候,将一个节点拽到很远就会报错

    谢谢大神,还是有一些问题,当某一级节点有很多的时候,将一个节点拽到很远就会报错

    谢谢大神,还是有一些问题,当某一级节点有很多的时候,将一个节点拽到很远就会报错。 其实也不用拖拽很远,就是某一级节点超过10个的时候,交换位置就会报错。

    ImData.js:54 Uncaught TypeError: Cannot set property 'id' of undefined at B (ImData.js:54) at B (ImData.js:63) at t.value (ImData.js:158) at a.move (MindMap.vue:327) at a.dragended (MindMap.vue:690) at r.apply (dispatch.js:61) at s (on.js:103) at Object.d (drag.js:137) at B (drag.js:76) at on.js:27

    image

    然后拖拽节点到另一节点的功能也报错了。

    同时我也在读源码,来理解您的思路。

    opened by qubeijun 3
  • dev模式下运行良好,production模式下运行出错

    dev模式下运行良好,production模式下运行出错

    测试reparent时

    opened by hellowuxin 3
  • 导出思维导图显示 黑色

    导出思维导图显示 黑色

    image

    opened by liyinchigithub 3
  • 关于新建节点删除问题

    关于新建节点删除问题

    大佬您好,新建节点后如果把文字删除,这个节点的区域就会很小很不明显,再想删除这个节点,不容易选中。 建议节点文字删除并确定后,自动把这个节点也删了,或者给节点选中区域设置个最小宽度 另外可以提pr吗

    opened by xudagongzi 2
  • 运行报translate错误

    运行报translate错误

    一运行就报这个,并且鼠标一移动会增加错误,按照你的步骤来的 image 请问如何下手

    opened by NicolasDevil 2
  • Bump url-parse from 1.5.1 to 1.5.3

    Bump url-parse from 1.5.1 to 1.5.3

    Bumps url-parse from 1.5.1 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump path-parse from 1.0.6 to 1.0.7

    Bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Keyboard event and blur event conflict

    Keyboard event and blur event conflict

    Hello,sir! When a node is selected, pressing enter will increase the peer node, and then start input. Pressing enter will end input and select. At this moment, pressing enter will increase the peer node. How to realize this

    opened by wuchunyu 0
  • Bump hosted-git-info from 2.8.8 to 2.8.9

    Bump hosted-git-info from 2.8.8 to 2.8.9

    Bumps hosted-git-info from 2.8.8 to 2.8.9.

    Changelog

    Sourced from hosted-git-info's changelog.

    2.8.9 (2021-04-07)

    Bug Fixes

    Commits
    Maintainer changes

    This version was pushed to npm by nlf, a new releaser for hosted-git-info since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump lodash from 4.17.19 to 4.17.21

    Bump lodash from 4.17.19 to 4.17.21

    Bumps lodash from 4.17.19 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • See full diff in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • 右击事件

    右击事件

    很感谢使用大佬的开源思维导图,我想在右击事件上加一个复制的功能该如何加?

    opened by yinlingshishangS 0
  • 线条样式

    线条样式

    想问一下这个线条的样式能改吗

    opened by hhhlq123 0
  • Bump elliptic from 6.5.3 to 6.5.4

    Bump elliptic from 6.5.3 to 6.5.4

    Bumps elliptic from 6.5.3 to 6.5.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • shift+鼠标滚轮 左右滑动

    shift+鼠标滚轮 左右滑动

    许多软件支持 shift+鼠标滚轮来进行左右滑动,是否方便在这里实现

    opened by TCPsoftware 0
Owner
wuxin
疯狂的鸽子
wuxin
Yandex Maps Component for VueJS

vue-yandex-maps Documentation: RU, EN Contributors ✨ Thanks goes to these wonderful people (emoji key): Wormaster ?? Nikitenko Andrey ?? Kamil ?? Alex

null 310 Jan 23, 2022
Choropleth Map component for Vue.js

vue-choropleth Vue components to display a choropleth map given a certain GeoJSON and another datasource to show information from. Using Vue2Leaflet H

Guillermo Peralta Scura 110 Jan 2, 2022
a simple component to generate an static google map

vue-static-map a simple component to generate an static google map Google Documentation Demo SandBox JSBin example Requirements Vue 2.X.X Usage Instal

Eduardo P. Rivero 22 Sep 18, 2021
vue google map custom marker component

vue2-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an adaptation of the Goog

eric regnier 124 Jan 14, 2022
Google maps component for vue with 2-way data binding

vue-google-maps Demo: Demo in production Showcase with a lot of features Presentation If you want to write google map this way : <map :center="{lat:

Guillaume Leclerc 547 Jan 14, 2022
A wrapper component for consuming Google Maps API built on top of VueJs v2.

A wrapper component for consuming Google Maps API built on top of VueJs v2. Fork of the popular vue-google-maps plugin.

Diego A. Zapata Häntsch 117 Jan 12, 2022
🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...

vue-custom-google-autocomplete Installation You need Vue.js version 2.0+ and an Google PLACE API key. This plugin is a renderless component. It comes

Damien Roche 29 Dec 9, 2021
A Vue JS component for displaying dynamic data on a world map.

This is no longer being maintained, please do not open issues or PRs. Vue World Map A Vue JS Component for displaying dynamic data on a world map. Map

Gerard Burns 39 Jan 16, 2022
A simple events calendar for Vue2, no dependencies except Vue2.

vue-event-calendar A simple events calendar for Vue2, no dependencies except Vue2. responsive & mobile first. Live Demo Here 中文文档 Requirements vue: ^2

Geoff Zhu 632 Jan 5, 2022
An Mobile-First image viewer for Vue2 / 一个移动端优先的 Vue2 图片预览插件

img-vuer An Mobile-First image viewer for Vue2 中文 README ??‍♀️ Easy to use ?? Swipe gesture ?? Zoom gesture V0.11.0 Now you can use thumbnail~ V0.13.0

DJJo 260 Jan 15, 2022
A vue2 Passenger guiding platform(vue2+vue-router+axios+element-ui+sass)

A vue2 Passenger guiding platform(vue2+vue-router+axios+element-ui+sass)

刘云鹤 13 Oct 19, 2020
Simple Vue2 notification component

Notify A simple bootstrap|bulma styled Vue component for notifications. Compatible with Vue 2.x Requirements Required packages: vue 2+ velocity-animat

Adam van Dongen 36 Oct 14, 2021
Simplest Youtube Like Loading Bar Component For Vue 2. http://bosnaufal.github.io/vue2-loading-bar/

Vue 2 Loading Bar Simplest Youtube Like Loading Bar Component For Vue 2 DEMO Install You can import vue2-loading-bar to your vue component file like t

Naufal Rabbani 269 Dec 20, 2021
vue-ya-semantic-modal - Yet another semantic-ui modal component for Vue2 without Jquery but with Vue transition

vue-ya-semantic-modal Yet another semantic-ui modal component for Vue2 without Jquery but with pure Vue transition This component only provide a frame

null 21 Apr 23, 2021
Window component for vue2

vue-window Introduction Recent web applications are mainly for mobile environments. Therefore window UI is no longer mainstream. However, window UI is

Koike Michitaro 274 Jan 4, 2022
This is web navigation component base on vue2.0+. It can be used in both PC and mobile.

vue-quick-menu This is web navigation component base on vue2.0+. It can be used in both PC and mobile. demo Installation npm install vue-quick-menu -

Ashley Lv 221 Jan 6, 2022
Menu/Contextmenu Component for vue2

vue-menu Introduction Recent web technologies focus on mobile environments. UIs premised on mouse operation such as window, context-menu, nested-menu

Koike Michitaro 241 Dec 25, 2021
A lightweight calendar component for Vue2

vue2-calendar Check out the demo here on Code Sandbox: Introduction This is a simple and small event calendar component for Vue js. It is very lightwe

Vincent 54 Nov 4, 2021
A datepicker / datetimepicker component for Vue2

vue2-datepicker 中文版 A Datepicker Component For Vue2 Demo https://mengxiong10.github.io/vue2-datepicker/index.html Install $ npm install vue2-datepicke

也无风雨 1.3k Jan 22, 2022
vue-virtual-infinite-scroll - A vue2 component based on Iscroll, supports big data list with high performance scroll, infinite load and pull refresh.

vue-virtual-infinite-scroll a vue2 component based on Iscroll, supports big data list with high performance scroll, infinite load and pull refresh. Ba

Lei Zuo 46 Nov 8, 2021
a touch swipe tab component for vue.js(vue2).

vue-tab - swipe tab simplify This component is already used in production env. Overview vue-tab is a touch swipe tab for vue.js. Install npm install -

Shawn Cheung 49 Jul 26, 2021
A Beautiful Datepicker Component For Vue2

vue-datepicker-local A Beautiful Datepicker Component For Vue2 Lightweight (less than 5kb minified and gzipped) Only dependencies Vue Beautiful! Demo

飞越 294 Jul 17, 2021
Vue2 Component for draggable and resizable elements.

VueDraggableResizable 2 Vue2 Component for draggable and resizable elements. If you are looking for the version 1 of the component, it is available on

Maurizio 2.5k Jan 21, 2022
Vue2 component, that allows you to drag object wherever you want

vue-drag-it-dude Vue2 component, that allows you to drag object wherever you want What this can do Drag and drop DOM elements inside parent (or docume

Max Novikov 73 Nov 4, 2021
base on vue2.0+ verification code input component. (基于Vue2.0+的移动端验证码输入组件)

vue-input-code 基于Vue2.0+的移动端验证码输入组件. 功能预览 输入时回调 结果回调 自定义错误处理 自定义验证码个数 样式可控 这里是可爱的Demo 支持 支持 Vue.js 2.0+. 安装和使用 npm install vue-input-code --save 作为全局组

Obeta 66 Jan 10, 2022
🗃️Smart widget is a flexible and extensible content container component for Vue2.x.

vue-smart-widget Smart widget is a flexible and extensible content container component. It includes header and body part, and widget body includes edi

Yunwei Xiao 93 Jan 13, 2022
A sortable and searchable table, as a Vue2 component, using bootstrap styling.

vue2-bootstrap-table vue-bootstrap-table is a sortable and searchable table, with Bootstrap styling, for Vue.js. Vue 2.6.0 : 1.2.1 (column slots suppo

JBay Solutions 119 Nov 12, 2021
A vue2 component for manual data masking

A vue2 component for manual data masking

HC 2 Jun 20, 2021
The Vue Component for SumiMakito's Awesome-qr.js. Support Vue2/Vue3/Vite

The Vue Component for SumiMakito's Awesome-qr.js. Support Vue2/Vue3/Vite

binaryify 639 Jan 21, 2022