教你在vue中使用jointjs的方法

原创 年树先生 随笔 vue 13721阅读 2018-12-12 21:59:48 举报

本篇文章主要介绍了在vue中使用jointjs的方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。

首先在vue项目中运行npm install jointjs --save
然后在入口文件,我的是main.js,也有可能是app.js中加入下面两行,把joint.js和jquery作为全局变量

这里需要注意的是,joint.js依赖backbone、jquery和lodash,在通过script方式引入时,需要一一引入这些文件,但通过vue的npm时不需要,npm引入的joint.js已经默认封装好了这些。
通过这样引入还不够,可能会遇到图可以正常加载,但无法拖拽的问题,遇到这些问题一般是joint.js和自己vue项目中的环境冲突了,导致无法读取或者读取错误。
我原来的项目中安装了element、iview、axios、vuex、jquery,再安装joint.js后,jointjs无法正常加载,后来重新建了一个项目,只安装了element、axios、vuex,为避免jquery和joint.js中的jquery冲突,后来没有装jquery。
这样就行了么?就可以运行上文链接中的例子了么?像这样:

NoNoNo,注意到这里是把渲染放在了created的生命周期里,根据vue的生命周期,是无法找到joint的挂载div的el: $('#myholder'),也就是说,运行会报错,我的解决方法是把div放了一个click,把joint的内容从created中拿出,放在methods中,需要点击一下才可显示哦,还不太完美,以待改进(~ ̄▽ ̄)~
也就是说,代码会变成这样:

点明一下,通过npm引入只要install jointjs就可以,不需要install lodash、backbone、jquery,也不需要在页面中导入joint.css文件。笔者之前通过script方式引入joint.js,试了很多次,都没有成功,一直读取joint.js文件出错,如果其他小伙伴尝试成功,欢迎交流分享。

结语

感谢您的观看,如有不足之处,欢迎批评指正。

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复