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

Overview

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

Sylvain Julé 79 Dec 12, 2021
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

马金花儿 2.2k Jan 16, 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
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

Vladimir Vershinin 610 Jan 12, 2022
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
New Sayobot Map Downloader Written by [email protected], [email protected], [email protected]

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

null 5 Nov 19, 2021
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

Melih Altıntaş 223 Jan 24, 2022
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 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

Victor Cazanave 65 Jan 18, 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

Studio Meta 36 Nov 9, 2021
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

City of Philadelphia 48 Oct 27, 2021
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

Edoardo Gargano 7 Mar 31, 2020
Traveliko - Travel with Friends ~ Web application prepared using Google Street View API that allows you to real-time travel with your friends in the same place in street view mode.

Traveliko - Travel with Friends! You can create a room with your friends and travel in street view mode and navigate the map. The application basicall

İlker Güldalı 5 Jun 1, 2021
Render every single road in any city, The data is fetched from OpenStreetMap using overpass API.

Render every single road in any city, The data is fetched from OpenStreetMap using overpass API.

Andrei Kashcha 4.6k Jan 21, 2022
Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable

office-map Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable загрузка из JSON информации о

Zoya 0 Dec 5, 2021
Google maps component for vue with 2-way data binding

CONTRIBUTORS NEEDED! It's been increasingly difficult for me to make time to maintain this project. My projects at work have also gradually migrated a

Daniel Sim 1.8k Jan 8, 2022
Vue 2 components for Leaflet maps

Vue2Leaflet Vue2Leaflet is a JavaScript library for the Vue framework that wraps Leaflet making it easy to create reactive maps. How to install npm in

Vue Leaflet 1.8k Jan 21, 2022
A Vue.js component for Mapbox GL JS

Mapbox GL JS Vue.js A simple lightweight (9kb/3kb gzipped) Mapbox GL JS Vue component. Demo Installation Setup Props Events Plugins Popups Development

Pete Hegman 262 Nov 21, 2021