vue使用jsMind（思维导图）

前言

jsMind 是一个显示/编辑思维导图的纯 javascript 类库，其基于 html5 的 canvas 进行设计。

我们使用它可能需要在网页上单纯的使用这种图样的效果，而其他交互却是自定义的，我这边选择的是jsMind 与 网上的一个jsmind.menu.js（右键菜单）。

开始

安装

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

注： 常规用法看网上jsMind。

实例修改

在使用jsMind感觉有一些问题（不知道是不是我这边电脑的问题）以及满足我的需求做了一些改变。

隐藏和打开样式居下

处理方式（增加样式）：

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

隐藏和打开 滑动条有问题

处理方式（重构内部方法）：

打开 https://gitee.com/314079846/jsmind/blob/master/js/jsmind.js 找到这个使用修改宽度和高度的方法进行重构！！

;(function ($w, mind) {
   
  var Jm = $w[mind]
  Jm