vue使用jsMind(思维导图)

news2025/7/17 9:07:53

前言

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

jsmind.menu.js 中 增加自定义菜单并自定义函数

jsmind.menu.js 中 寻找到定义menu的地方,增加custom自定义属性

注: 自定义的东西肯定需要自定义一个类型或者唯一性的key,让代码知道我点击的是哪一个,所以还需要处理点击事件。

jsmind.menu.js 中 增加 菜单点击事件自定义

寻找对应点击事件_create_menu_item_get_injectionList.
在里面增加key属性。

即:

后面使用方式(options):

每一个节点样式根据节点数据变化的

目前的jsMind是设置了主题,不过是不满足我的需求,还有每一个节点的样式设置了常用的backgroundwidth等,需要自己的话得重构设置style方法

在里面添加自己需要的样式。

节点鼠标右键位置

鼠标大概在红圈位置右键,放大缩小的时候会位置有问题。

解决方式:

jsmind.menu.js中修改menuStl增加布局样式 'transform-origin': '0 0'

每个节点对应不同的菜单

目前插件是统一每一个是一样的menu。

修改方式:

  • 每一个节点可定义一个dataClass 属性,不写是未定义不显示任何菜单,名字自定义取
  • 对应的menu中的injectionList数组增加dataClass属性
  • jsmind.menu.js_event_contextMenu方法修改每一个menu-item的样式是否显示,同时_create_menu_item方法增加menuItem的class。

放大缩小数据多了左边会显示不出来

看图:

解决方式:

setZoom方法

 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
  }

第一种: 增加 paddingLeft样式

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'

第二种: 设置 transform-origin

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

实现效果

demo效果

总结

为了实现我的效果,又不太想用庞大的组件和插件,jsMind是非常合适的选择,可重构、可扩展。感谢jsMindjsmind.menu.js的分享者!

参考

jsMind(https://gitee.com/314079846/jsmind/tree/master)

欢迎各位圈友关注,一起浪~
前端浪客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/406451.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Node.js 全网最详细教程 (第一章:Node学习入门必看教程)

1&#xff1a;Node的学前必知&#xff1a; 1: 在学习node之前&#xff0c;想必你应该学习过HTML&#xff0c;CSS&#xff0c;JavaScript 2: 浏览器中的JavaScript由两部分组成&#xff1a;JS核心语法和WebAPI JS核心语法WebAPI变量&#xff0c;数据类型DOM操作循环&#xff0…

Nginx静态资源部署

目录 Nginx静态资源概述 Nginx静态资源的配置指令 listen指令 server_name指令 location指令 设置请求资源的目录root / alias index指令 error_page指令 静态资源优化配置语法 Nginx静态资源压缩实战 Gzip模块配置指令 Gzip压缩功能的实例配置 Gzip和sendfil…

geoserver发布地图服务

geoserver发布地图服务发布wmts服务发布样式发布映像服务发布要素服务发布wmts服务 新建工作空间 保存后点击工作区 将shp文件上传到服务器 发布geoserver 服务 选择数据存储-》添加新的数据存储 这时可以选择两种方式 一种是直接将整个shp文件导入&#xff0c;一种是一…

【TS】object类型

object是一个对象&#xff0c;在ts中定义对象类型的语法为&#xff1a;let 变量名 &#xff1a;object { } 在object类型中&#xff0c;对象内部定义的值是不受类型约束的&#xff0c;只要是一个object类型即可&#xff0c;例如&#xff1a; let obj : object {name : 艺术概…

HTML <span>标签

HTML 中的<span>标签被视为内联元素。它类似于 div 标记&#xff0c;但 div 标记特意用于块级元素&#xff0c;而 span 用于内联元素。它主要用于用户想要将内联元素分组到其代码结构中。HTML 中的 Span 标记用于通过使用元素类或 id 属性为特定内容提供样式。使用 HTML …

element-ui table使用type=‘selection‘复选框全禁用-全选禁用

目录 问题总结&#xff1a; 当条件数据全被禁用时&#xff0c;全选按钮也变成禁用的状态&#xff0c;而不是隐藏。有会做的小伙伴希望跟帖。谢谢&#xff01; 复选框框架&#xff1a;通过调用selectable方法&#xff0c;进行禁用复选框。 1.指定行禁用&#xff1a; 2.条件禁用&…

在Tomcat中部署web项目出现http状态-404 -未找到详细解决方案

问题描述&#xff1a; 当我们向tomcat服务器发起请求时&#xff0c;出现如下的错误状态提示–404.这个问题在开发过程中可能会经常遇到&#xff0c;所以做一个归纳总结&#xff1a; 以下的内容适用于IDEA&#xff0c;使用其他编辑器的小伙伴们需要注意区别。 情景① –> …

overflow:auto的用法和实现弹性盒横向滚动

1. 前言引入&#xff1a; overflow&#xff1a;auto含义是&#xff1a;如果高度撑开了原有设定的高度&#xff0c;那么可以添加这个属性&#xff0c;让它出现滚动条滚动显示。 举例说明&#xff1a; 我们做一个京东移动端&#xff0c;以iphone-XE分辨率为准的例子&#xff…

NavMenu导航菜单el-submenu点击事件及激活状态变化

记录多级菜单时&#xff0c;NavMenu导航菜单的一级菜单点击事件以及当前激活状态变化 原因&#xff1a; 由于项目的需求变化&#xff0c;原本是点击二级子菜单才发生跳转&#xff0c;点击子菜单后&#xff0c;el-menu组件也会执行select的方法&#xff0c;导航栏的菜单也会对应…

vue全局引入scss样式文件

在vue中全局引入非功能性的scss样式文件很简单&#xff0c;只需要在main.js文件中引入对应文件就行 import { createApp } from vue import App from ./App.vue import router from ./router import store from ./store // 全局引入样式文件 import /assets/scss/index.scss cr…

Vue3点击侧边导航栏完成切换页面内组件(WEB)

Vue3点击侧边导航栏完成切换页面组件 目录效果思路过程获取当前点击DOM并添加点击class将其它的导航未点击项isclick样式类去除完整代码导航代码显示页面代码路由设置感谢效果 点击左侧导航&#xff0c;右面页面切换。 思路 使用router-view显示点击后需要切换的组件&#xf…

uniapp 改写uni-data-picker级联选择器(带搜索和多选)新增列出选择和删除功能

效果演示 注意&#xff1a;视频中的数据是模拟数据&#xff0c;请自行定义数据才可使用&#xff0c;数据格式末尾有例子 uniapp 改写uni-data-pickeruni-data-picker.vue更改 <template><view class"uni-data-tree"><view class"uni-data-tree…

【微信小程序】自定义组件(一)

&#x1f381;写在前面&#xff1a; 观众老爷们好呀&#xff0c;这里是前端小刘不怕牛牛频道&#xff0c;小程序系列文章又更新了呀。 今天牛牛带来的是微信小程序的自定义组件入门知识&#xff0c;赶紧拿起小本本做笔记呀&#xff01; 文章目录一&#xff0c;创建和引用1.1 …

若依数据分页功能的实现

目录 一、问题引出 二、原理分析&#xff1a; ①前端部分&#xff1a; ②后端部分&#xff1a; 三、总结 一、问题引出 我们可以注意到若依界面中处理大量数据时&#xff0c;一个页面展示不过来时&#xff0c;会采纳多页处理的方法。 此时我们拿若依里边的系统管理中的日志…

Umi4 从零开始实现动态路由、动态菜单

Umi4 从零开始实现动态路由、动态菜单&#x1f355; 前言&#x1f354; 前期准备&#x1f4c3; 数据表&#x1f917; Mock数据&#x1f517; 定义类型&#x1f388; 开始&#x1f383; 获取路由信息&#x1f9f5; patchRoutes({ routes, routeComponents})&#x1f4f8; 生成动…

第二十一篇 vue组件引入使用

这篇内容是关于组件在Vue中的引入和使用&#xff1b;什么是组件以及做组件化的开发&#xff0c;在Vue中&#xff0c;组件是构成页面中独立结构单元&#xff0c;能够减少重复代码的编写&#xff0c;提高开发效率&#xff0c;降低代码耦合度&#xff0c;便于维护和管理&#xff1…

前端请求中body和query传参

前端发送请求最常用的是get请求和post请求 get请求只能传query参数&#xff0c;query参数都是拼接在请求地址上的。 post可以传body和query两种形式的参数。 get请求在url中传送的参数是有长度限制的&#xff0c;而post没有限制。 get比post更不安全&#xff0c;因为参数直接…

十、Echart图表 之 dataZoom区域缩放 基本使用与配置大全

&#x1f353; 作者主页&#xff1a;&#x1f496;仙女不下凡&#x1f496; &#x1f353; 前言介绍&#xff1a;以下&#x1f447;内容是我个人对于该技术的总结&#xff0c;如有不足与错误敬请指正&#xff01; &#x1f353;Echart官网地址&#xff1a;https://echarts.ap…

layui-icon各种常用动态图标

<buttonid"btnPrintDetail"class"<br/>layui-btnicon-btn"><iclass"<br/>layui-icon">&#xe66d;</i>明细打印</button> icon很多&#xff0c;选择起来纷繁复杂&#xff0c;罗列一点常用的&#xff0c;用…

uniapp scroll-view基础用法

前言 在uniapp日常开发的过程中经常会有局部滚动的需求&#xff0c;而scroll-view组件正好可以满足这一需求。需注意在webview渲染的页面中&#xff0c;区域滚动的性能不及页面滚动。 纵向滚动 将scroll-view组件中的属性scroll-y设定为true开启纵向滚动功能&#xff0c;给scr…