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