jsmind

<template>
    <js-mind :values="mind" :options="options" ref="jsMind" height="1000px"  id="jsmind_container" style="flex:none"/>
</template>

<script>
  

  export default {

    data () {
      return {
        mind:
        {
    "meta":{
        "name":"example",
        "author":"hizzgdev@163.com",
        "version":"0.2"
    },
    "format":"freemind",
    "data":"<map version=\"1.0.1\"> <node ID=\"root\" TEXT=\"jsMind\" > <node ID=\"easy\" POSITION=\"left\" TEXT=\"Easy\" > <node ID=\"easy1\" TEXT=\"Easy to show\" /> <node ID=\"easy2\" TEXT=\"Easy to edit\" /> <node ID=\"easy3\" TEXT=\"Easy to store\" /> <node ID=\"easy4\" TEXT=\"Easy to embed\" /> </node> <node ID=\"open\" POSITION=\"right\" TEXT=\"Open Source\" > <node ID=\"open1\" TEXT=\"on GitHub\" /> <node ID=\"open2\" TEXT=\"BSD License\" /> </node> <node ID=\"powerful\" POSITION=\"right\" TEXT=\"Powerful\" > <node ID=\"powerful1\" TEXT=\"Base on Javascript\" /> <node ID=\"powerful2\" TEXT=\"Base on HTML5\" /> <node ID=\"powerful3\" TEXT=\"Depends on you\" /> </node> <node ID=\"other\" POSITION=\"left\" TEXT=\"test node\" > <node ID=\"other1\" TEXT=\"I'm from local variable\" /> <node ID=\"other2\" TEXT=\"I can do everything\" /> </node> </node> </map>"
}

        ,
        options : {
   container : 'jsmind_container', 			// [required] ID of the container
   editable : true, 		// Is editing enabled?
   theme : 'orange', 			// theme
   mode :'full', 			// display mode
   support_html : true, 	// Does it support HTML elements in the node?
   view:{
       engine: 'canvas', 	// engine for drawing lines between nodes in the mindmap
       hmargin:100, 		// Minimum horizontal distance of the mindmap from the outer frame of the container
       vmargin:50, 			// Minimum vertical distance of the mindmap from the outer frame of the container
       line_width:2, 		// thickness of the mindmap line
       line_color:'#555' 	// Thought mindmap line color
   },
   layout:{
       hspace:30, 			// horizontal spacing between nodes
       vspace:20, 			// vertical spacing between nodes
       pspace:13 			// Horizontal spacing between node and connection line (to place node expander)
   }, 
   shortcut:{
       enable:true, 		// whether to enable shortcut
       handles:{}, 			// Named shortcut key event processor
       mapping:{ 			// shortcut key mapping
           addchild : 45, 	// <Insert>
           addbrother : 13, // <Enter>
           editnode : 69, 	// <F2>
           delnode : 46, 	// <Delete>
           toggle : 32, 	// <Space>
           left : 37, 		// <Left>
           up : 38, 		// <Up>
           right : 39, 		// <Right>
           down : 40, 		// <Down>
       }
   },
}
      }
    }
  }
</script>

<style lang="less">
 div /deep/ .hello .jmnodes.theme-orange .jmnode {
    background-color:#aaa;
    color: #aaa;
}
.hello{
  background-color: gray;
}

</style>

　　main.js

import jm from 'vue-jsmind'
Vue.use(jm)