vue使用jsMind思维导图的实战指南

npm i jsmind --save

import 'jsmind/style/jsmind.CSS'
import jsMind from 'jsmind/js/jsmind.js'
window.jsMind = jsMind
const { init, reBuild } = require('./jsmind.menu.js')
const { resetMind } = require('./jsResetMind.js')
init(jsMind)
resetMind(jsMind)
...

// 让其居中
jmexpander {
  display: flex;
  justify-content: center;
  align-items: center;
}

;(function ($w, mind) {
  var Jm = $w[mind]
  Jm.view_provider.prototype.expand_size = function () {
    var min_size = this.layout.get_min_size()
    var min_width = min_size.w + this.opts.hmargin * 2
    var min_height = min_size.h + this.opts.vmargin * 2
    // 修改这里  每一个大概减去20左右
    var client_w = this.e_panel.clientWidth - 20
    var client_h = this.e_panel.clientHeight - 20
    if (client_w < min_width) {
      client_w = min_width
    }
    if (client_h < min_height) {
      client_h = min_height
    }
    this.size.w = client_w
    this.size.h = client_h
  }

  if (typeof module !== 'undefined' && typeof exports === 'object') {
    module.exports = {
      resetMind: function (opt) {
        Jm = opt
      },
    }
  }
})(window, 'jsMind')

 Jm.view_provider.prototype.setZoom = function (zoom) {
    if (zoom < this.minZoom || zoom > this.maxZoom) {
      return false
    }
    this.actualZoom = zoom
    for (var i = 0; i < this.e_panel.children.length; i++) {
      this.e_panel.children[i].style.transform = 'scale(' + zoom + ')'
       this.e_panel.children[i].parentnode.style['padding-left'] = (zoom * this.e_panel.children[i].parentNode.clientWidth - this.e_panel.children[i].parentNode.clientWidth) / 2 + 'px'
      // this.e_panel.children[i].style['transform-origin'] = '0 0'
    }
    this.show(true)
    return true
  }

this.e_panel.children[i].parentNode.style['padding-left'] = (zoom * this.e_panel.children[i].parentNode.clientWidth - this.e_panel.children[i].parentNode.clientWidth) / 2 + 'px'

this.e_panel.children[i].style['transform-origin'] = '0 0'