The simple-vue-mind-map is a library for mind map in using in vue

Last update: Oct 19, 2021

simple-vue-mind-map

introduction:

The simple-vue-mind-map is a library for mind map in using in vue.

usage:

step 1: include the library into your project:

via npm

npm install --save simple-vue-mind-map

step 2: import simple-vue-mind-map in the entry of your project:

import Vue from "vue";
import MindMap from "simple-vue-mind-map";

Vue.use(MindMap);

step 3: there will be a component named mind-map in global, you can use it:

">
<mind-map
  :data="map"
  width="1104"
  height="400"
  :show-reason="false"
  @data-change="handleDataChange"
  @node-delete="handleDeleteNode">
mind-map>

full example:

">
<template>
  <div id="app">
    <mind-map
      :data="map"
      width="1104"
      height="400"
      :show-reason="false"
      @data-change="handleDataChange"
      @node-delete="handleDeleteNode">
    mind-map>
  div>
template>

<script>
export default {
  name: 'App',
  data () {
    return {
      map: [
        {
          label: 'xxx科技有有限公司',
          root: true,
          reason: 0,
          children: [
            {
              label: '产品研发部',
              reason: 0,
              children: [
                {
                  label: '研发-前端',
                  reason: 0
                },
                {
                  label: '研发-后端',
                  reason: 0
                },
                {
                  label: 'UI 设计',
                  reason: 0
                }
              ]
            },
            {
              label: '销售部',
              reason: 0,
              children: [
                {
                  label: '销售一部',
                  reason: 0
                },
                {
                  label: '销售二部',
                  reason: 0
                }
              ]
            },
            {
              label: '财务部',
              reason: 0
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleDataChange (data) {
      this.map = data
    },
    handleDeleteNode (nodeData, callback) {
      callback(true)
    }
  }
}
script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

#app {
  margin-top: 50px;
}

::v-deep .drawing-board {
  border-radius: 4px;
}
style>

GitHub

https://github.com/linzhe141/simple-vue-mind-map-linzhe
You might also like...

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

May 10, 2022

A set of Vue.js components to display an interactive SVG map

vue-svg-map A set of Vue.js components to display an interactive SVG map. Demo Take a look at the live demo! Installation npm npm install --save vue-s

Jul 10, 2022

EV Charge Map is an application to search for all the EV charge points for your journey. Made with Quasar/Vue

EV Charge Map is an application to search for all the EV charge points for your journey. Made with Quasar/Vue

EV Charge Map is an application to search for all the EV charge points for your journey. Made with Quasar/Vue

Aug 3, 2022

Kartobuilder - a php package for the laravel framework that works with the inertia jetstream stack to build your own map

Kartobuilder is a php package for the laravel framework that works with the inertia jetstream stack to build your own map.

May 3, 2022

🗺 Map Module for Nuxt 3

@nuxtjs/map Map module for Nuxt ✨ Release Notes 📖 Read the documentation Features Nuxt 3 ready Easy integration with Google Maps & Leaflet Use only t

May 1, 2022

🗺 Vue Mapbox GL - A small components library to use Mapbox GL in Vue

🗺 Vue Mapbox GL A small components library to use Mapbox GL in Vue. Installation & usage Have a look at the small guide for information on how to set

Jul 21, 2022

a library of vue components used by mapping applications

a library of vue components used by mapping applications

phila-vue-mapping (@phila/vue-mapping in npmjs.com) phila-vue-mapping is a library of Vue components that can be used in mapping apps which use Vue.js

Jun 13, 2022

A well-packaged MapboxGL component library for Vue3.

MapVue The library is in developing, although basic development is complete, it is still not recommended for use in production environments. English |

Aug 5, 2022

Using Google Maps with Vue.js

stores-map Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Run

Apr 22, 2022
Directus-extension-svgmap-picker-interface - Select a value from a SVG Map box, built using vue.js
Directus-extension-svgmap-picker-interface - Select a value from a SVG Map box, built using vue.js

This extension is under development, it may take breaking changes. SVG Map Picke

Jun 13, 2022
This component allows you to display custom HTML content on the map using Overlay
This component allows you to display custom HTML content on the map using Overlay

vue3-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an update (a fork) from e

Apr 1, 2022
a simple component to generate an static google map
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

May 17, 2022
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.

Kirby Locator A simple map & geolocation field, built on top of open-source services and Mapbox. Overview This plugin is completely free and published

Jun 25, 2022
Baidu Map components for Vue 2.x
Baidu Map components for Vue 2.x

VUE BAIDU MAP Baidu Map components for Vue 2.x Languages 中文 English Documentation https://dafrok.github.io/vue-baidu-map Get Start Installation npm i

Aug 15, 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

Jul 11, 2022
Web map Vue components with the power of OpenLayers

VueLayers Web map Vue components with the power of OpenLayers Overview VueLayers is components library that brings the powerful OpenLayers API to the

Aug 9, 2022
vue google map custom marker component
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

Aug 1, 2022
New Sayobot Map Downloader Written by [email protected], [email protected], [email protected]
New Sayobot Map Downloader Written by Electron@12, Vite@2, Vue@3

SayoDownloader This software only provide in Chinese! 一个全新设计的小夜地图下载器

Aug 8, 2022
Web map Vue 3.x components with the power of OpenLayers
Web map Vue 3.x components with the power of OpenLayers

vue3-openlayers Web map Vue components with the power of OpenLayers Overview vue3-openlayers is components library that brings the powerful OpenLayers

Aug 17, 2022