位置: 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)

  • 腾讯QQ新增了哪些表情(腾讯最新qq)

    腾讯QQ新增了哪些表情(腾讯最新qq)

  • 余额宝明细有删除的办法吗(余额宝明细有删除记录吗)

    余额宝明细有删除的办法吗(余额宝明细有删除记录吗)

  • 快手怎么保存视频到本地相册(快手怎么保存视频不带快手号)

    快手怎么保存视频到本地相册(快手怎么保存视频不带快手号)

  • 以管理员身份运行是什么意思(以管理员身份运行怎么关掉)

    以管理员身份运行是什么意思(以管理员身份运行怎么关掉)

  • 怎么设置漂亮的微信二维码(怎么设置漂亮的页边距)

    怎么设置漂亮的微信二维码(怎么设置漂亮的页边距)

  • 小米蓝牙耳机声音小(小米蓝牙耳机声音小的解决方法)

    小米蓝牙耳机声音小(小米蓝牙耳机声音小的解决方法)

  • oppor15怎么降低版本(oppor15x如何降低系统版本)

    oppor15怎么降低版本(oppor15x如何降低系统版本)

  • 抖音是什么平台(抖音是什么平台属性)

    抖音是什么平台(抖音是什么平台属性)

  • 滴滴还有顺风车吗(滴滴还有顺风车业务吗)

    滴滴还有顺风车吗(滴滴还有顺风车业务吗)

  • 快手别人评论图片为什么看不见(快手别人评论图片删除视频教程)

    快手别人评论图片为什么看不见(快手别人评论图片删除视频教程)

  • 录音发微信怎么发的(录音发微信怎么发给别人)

    录音发微信怎么发的(录音发微信怎么发给别人)

  • 不是群主怎么删除成员(不是群主怎么删除群相册)

    不是群主怎么删除成员(不是群主怎么删除群相册)

  • 淘宝ifashion如何进入(淘宝的ifasion)

    淘宝ifashion如何进入(淘宝的ifasion)

  • 华为nova5支持防水吗(华为nova5防窥膜都不能指纹吗)

    华为nova5支持防水吗(华为nova5防窥膜都不能指纹吗)

  • 起床铃声去哪下载(起床铃声音频下载)

    起床铃声去哪下载(起床铃声音频下载)

  • 访客记录删除后对方知道吗(访客记录删除后对方知道吗抖音)

    访客记录删除后对方知道吗(访客记录删除后对方知道吗抖音)

  • ios13如何安装第三方应用(苹果13如何安装)

    ios13如何安装第三方应用(苹果13如何安装)

  • 充电头一直插着可以吗(充电头一直插着不拔可以吗)

    充电头一直插着可以吗(充电头一直插着不拔可以吗)

  • 表格出现乱码怎么解决(表格里面出现乱码)

    表格出现乱码怎么解决(表格里面出现乱码)

  • 热点身份验证出现问题怎么回事(连接热点出现身份验证出现问题是什么原因)

    热点身份验证出现问题怎么回事(连接热点出现身份验证出现问题是什么原因)

  • 悠趣直播怎么播游戏(悠趣直播怎么播放电影)

    悠趣直播怎么播游戏(悠趣直播怎么播放电影)

  • 苹果11怎么用卡2发短信(苹果11怎么装两张卡)

    苹果11怎么用卡2发短信(苹果11怎么装两张卡)

  • 日期占位符怎么删除(日期占位符怎么设置)

    日期占位符怎么删除(日期占位符怎么设置)

  • 手机怎样连接电视机(手机怎样连接电视机播放视频)

    手机怎样连接电视机(手机怎样连接电视机播放视频)

  • 荣耀手环3怎么接听电话(荣耀手环3怎么重新配对)

    荣耀手环3怎么接听电话(荣耀手环3怎么重新配对)

  • 运维老鸟谈生产场景对linux系统进行分区的方法(生产运维是干什么的)

    运维老鸟谈生产场景对linux系统进行分区的方法(生产运维是干什么的)

  • 块元素和行内元素及其元素转换(块元素和行内元素区别)

    块元素和行内元素及其元素转换(块元素和行内元素区别)

  • 什么是国税发票号码
  • 劳务派遣人员的工资计入什么科目
  • 一般纳税人报税流程详细操作
  • 一般纳税人每月开票不超10万
  • 个体户一年能开多少普票
  • 购入生产线属于什么费用
  • 所得税报表的营业成本包括管理费用吗
  • 个税申报填写的工资是应发还是实发
  • 收到红字发票如何申报增值税?
  • 工伤事故赔偿项目表
  • 如何让自己公司成为供应商
  • 多付的货款怎么追回
  • 车险代缴费
  • 物业公司需要向哪个部门缴费
  • 增值税专用发票和普通发票的区别
  • 进出口经营权什么意思
  • 企业试生产期间发生的费用怎么入账
  • 软件企业两免三减半税收政策到期
  • 营改增的重点是什么
  • 许可费怎么进行分类
  • 车间设备折旧计入哪个科目
  • 如何批量查询发票
  • 个人房源出租
  • 生产性生物资产包括哪些
  • 计提工资附加费啥意思
  • 劳务公司客户问题分析
  • 中央空调使用费怎么开发票
  • 小规模企业企业所得税优惠政策2022年
  • 申报个税是按哪个月的工资表
  • 销售推广的常用形式
  • win7 excel
  • 表单提交错误后怎么撤销
  • linux shell语句
  • 最新专业版win10
  • cryptfunction.exe
  • ccs是什么软件
  • linux子网掩码自动变成24
  • 又十个超级有用的PHP代码片段
  • PHP:zip_entry_name()的用法_Zip函数
  • 自创商誉可确认为商誉且在资产负债表中列报
  • 会计不忙
  • 增值税加计抵减怎么算
  • php 跨域
  • ps黑白怎么调
  • 实际库存小于账面库存
  • 租赁发票的租赁日期怎么写
  • 开收据可以列收入吗
  • 软件和硬件如何分开
  • 国际货运操作流程图
  • 申报表填完后下一步是什么
  • 清洁费用属于哪个会计科目
  • 客户多付的货款 不用退回 进营业外收入吗
  • 收政府的慰问金合法吗
  • 新冠捐款捐物新闻
  • 自建不动产领用原材料增值税进项
  • 原材料用于在建工程进项税可以抵扣吗
  • 小规模纳税人增值税专用发票税率
  • 股权转让的会计资料归谁所有
  • 坏账准备与应收账款的影响有哪些
  • 环保公司开票内容
  • 企业代扣个人社保最新会计处理
  • 折现率算现值公式
  • 收款凭证和付款凭证是出纳人员收款、付款的依据
  • mssql数据库的账号密码
  • mysql8.0免安装
  • imac固态
  • mac系统教程
  • windows更新88
  • win8 更新
  • cocos2dx-3.2+lua 启动项目小技巧
  • 浪漫樱花完整视频
  • jquery 鼠标悬浮显示文字
  • Android include 标签注意点
  • javascript中的对象用于
  • jquery实战
  • 重庆市电子税务局官网登录入口注册
  • 电梯维护保养费按什么缴纳增值税
  • 新能源汽车车船税
  • 深圳地方税务局电话
  • 山东居民养老金是多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设