vue-jsmind插件使用案例

1、main.js文件

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

if (window.jsMind) {
  console.log('wind')
  Vue.prototype.jsMind = window.jsMind
}

2、html代码

<template>
<div>
<js-mind :values="mind" :options="options" ref="jsMind" height="600px" width="200px">
</js-mind>
</div>
</template>

3、js代码

export default {
  data () {
    return {
      nodeId:'',
      drawer: false,
      direction: 'rtl',
      theme_value: '',
      mind: {
        meta: {
          name: 'jsMind remote',
          author: 'hizzgdev@163.com',
          version: '0.2'
        },
        format: 'node_tree',
        data: {
          id: 'root',
          topic: 'jsMind',
          children: [
            {
              id: 'easyeasyeasyeasy',
              topic: 'Easy9999',
              direction: 'left',
              expanded: true,
              children: [
                { id: 'easy1', topic: 'Easy to show' },
                { id: 'easy2', topic: 'Easy to edit' },
                { id: 'easy3', topic: 'Easy to store' },
                { id: 'easy4', topic: 'Easy to embed' }
              ]
            },
            {
              id: 'open',
              topic: 'Open Source',
              direction: 'right',
              expanded: true,
              children: [
                { id: 'open1', topic: 'on GitHub' },
                { id: 'open2', topic: 'BSD License' }
              ]
            },
            {
              id: 'powerful',
              topic: 'Powerful',
              direction: 'right',
              children: [
                { id: 'powerful1', topic: 'Base on Javascript' },
                { id: 'powerful2', topic: 'Base on HTML5' },
                { id: 'powerful3', topic: 'Depends on you' }
              ]
            },
            {
              id: 'other',
              topic: 'test node',
              direction: 'left',
              children: [
                { id: 'id_____other1', topic: "I'm from local variable" },
                { id: 'other2', topic: 'I can do everything' }
              ]
            }
          ]
        }
      },
      options: {
        container: 'jsmind_container', // [必选] 容器的ID
        editable: false, // [可选] 是否启用编辑
        theme: 'orange' // [可选] 主题
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      isShow: true
    }
  },
  mounted () {
    this.jm = this.$refs.jsMind.jm
    let _this = this;
    let div =  document.querySelector('.theme-orange');
    let jmnode = div.querySelectorAll('jmnode');
    for (var i = 0; i < jmnode.length; i++) {
            jmnode[i].index = i;
    }
    let TimeFn = null; 
    div.oncontextmenu = function(e){
      e.preventDefault()
    }

    div.onmouseup = function(e){
      if(!e){
        e = window.Event;
      }
      if(e.button == 2){
        console.log('右击')
        console.log(e.target)
        let nodeid = _this.jm.view.get_binded_nodeid(e.target);
        console.log(nodeid)

        const mainContainer  = document.querySelector('.jsmind-inner');

        mainContainer.addEventListener("mousemove", runEvent);
        //event handler
        function runEvent(e){
            e.preventDefault();
            let text =  `MouseX: ${e.offsetX},  MouseY: ${e.offsetY}`;
            console.log(text)
        }
      }
    }

    div.addEventListener('click',function(e){
      clearTimeout(TimeFn);
      TimeFn = setTimeout(function(){

        let nodeid = _this.jm.view.get_binded_nodeid(e.target);
        if(!!nodeid){
          // let tagName = e.target.tagName.toLowerCase()
          // console.log(tagName)
          // console.log(e.target)
          console.log('单击')

          // 判断是否有子项
          let children = _this.jm.get_node(nodeid).children.length;
          console.log(children)
          if(children > 0){
            return
          }

          var selectedNode = _this.jm.get_selected_node() // as parent of new node
          var nodeid2 = _this.jsMind.util.uuid.newid()
          var topic = 'new Node'
          _this.jm.enable_edit()
          _this.jm.add_node(selectedNode, nodeid2, topic)
          _this.jm.disable_edit()
          
        }
      },300);
        
            
    })

    div.addEventListener('dblclick',function(e){
      clearTimeout(TimeFn);
        var nodeid = _this.jm.view.get_binded_nodeid(e.target);
        if(!!nodeid){
          console.log('双击')
        }  
    })
  }
}

4、css代码

<style>
 canvas, jmnodes{left: 0px;}
</style>