位置: IT常识 - 正文

vue使用jsMind(思维导图)(vue 使用js)

编辑:rootadmin
vue使用jsMind(思维导图) 前言

推荐整理分享vue使用jsMind(思维导图)(vue 使用js),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jsmind vue,js.vue,js.vue,vue jsmind,vue 使用jsx,vue 使用js,vue jsmind,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 = jsMindconst { 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):

每一个节点样式根据节点数据变化的vue使用jsMind(思维导图)(vue 使用js)

目前的jsMind是设置了主题,不过是不满足我的需求,还有每一个节点的样式设置了常用的background、width等,需要自己的话得重构设置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是非常合适的选择,可重构、可扩展。感谢jsMind和jsmind.menu.js的分享者!

参考

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

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

本文链接地址:https://www.jiuchutong.com/zhishi/292418.html 转载请保留说明!

上一篇:vite环境变量配置(vericut9.0环境变量)

下一篇:Windows11安装Ubuntu20.04双系统,傻瓜教程(windows11安装ubuntu20.04)

  • 个人所得税劳务报酬范围
  • 如何查商品税收分类编码
  • 一般计税方法适用于500万
  • 缓交的社保费,包括个人部分
  • 生产型企业怎么退税
  • 发生销货退回增值税专用发票如何处理
  • 其他货币资金是资产类科目吗
  • 制造费用属于哪一类科目
  • 报关单金额大于合同金额
  • 非正常损失进项转出额如何计算
  • 计提摊销房租会计分录
  • 固定资产安装完毕达到预定可使用状态
  • 增值税专票需要哪些开票信息
  • 非营业活动交增值税吗
  • 固定资产减值准备属于什么科目
  • 职工教育经费列支范围及标准
  • 个人借款给公司利息多少合法
  • 成本费用怎么做分录
  • 股东房产用于公司经营的是否交房产税
  • 增值税发票过期未抵扣怎么办
  • 登陆对话框不能输入
  • 凤尾蕨的养殖方法
  • PHP中register_shutdown_function函数的基础介绍与用法详解
  • 直接人工分配按计时工资怎么分
  • 单位给个人开票需要什么资料才能开
  • 跟踪路由如何实现
  • ajax实现分页
  • axios怎么使用
  • 几款常用的表单设计软件
  • 退税的项目有哪些
  • 计入当期损益的利得分录
  • 库存现金盘盈怎么做账
  • JavaScript(WebAPI)+具体案例
  • transformer for
  • 美国人用什么英语词典
  • python字典怎么添加值
  • 集团公司内部结算
  • 事业单位政府拨款的会计分录
  • mongodb分页查询count太慢
  • 平时加班和节假日加班工资
  • 流动资产比例大说明什么
  • 软件使用权计入什么科目
  • 处置可供出售金融资产原先进入公允价值变动损益
  • 资产处置损益影响损益吗
  • 为什么要缴纳保险
  • 服务业增值税加计10%如何申报
  • 无形资产摊销是按原值吗
  • 计入委托加工物资成本的消费税
  • 保障房异地建设费属不属于土地成本
  • 出口退税转为免税处理有损失吗
  • 金税盘缴销发票
  • 诉讼费用负担原则是什么
  • 企业购手机的发票在哪里
  • 新会计准则会计科目明细表
  • 公司厂房房产税计税依据最新
  • 高新技术企业每年需要多少专利
  • 商品库存明细账
  • mysql8.0并行复制
  • Mysql 5.6.37 winx64安装双版本mysql笔记记录
  • mysql解压版怎么使用
  • window装机必备应用
  • 东芝笔记本图片及型号
  • win7环境变量在哪打开啊
  • Win7 64位系统声卡重装过程中出现失败的解决方法
  • win8系统无法开机如何备份数据
  • w10 2021年更新
  • win7重新安装windows
  • 详解linux中systemd命令的运行级别与其常见应用
  • cocos creator构建发布
  • dos 改名
  • js判断div是否存在
  • js重要知识点
  • jquery图片轮播代码
  • 发票上的税务号
  • 电子普票最多领多少
  • 公司欠税款,还不上,怎么办
  • 费减备案合格后怎么操作?
  • 个人租车收入如何缴纳个人所得税
  • 深圳蛇口社保局在哪里
  • 个人所得税税率表及速算扣除数
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设