在vue中使用jointjs

junfeng777 发布于2019-08-22 15:37 / 2109人阅读

摘要：在中引入的问题，之前在网上搜了很多，都没有给出一个确切的答案，捣鼓了两天终于弄明白了，做个记录。通过这样引入还不够，可能会遇到图可以正常加载，但无法拖拽的问题，遇到这些问题一般是和自己项目中的环境冲突了，导致无法读取或者读取错误。

在vue中引入joint.js的问题，之前在网上搜了很多，都没有给出一个确切的答案，捣鼓了两天终于弄明白了，做个记录。
首先，我参考了一篇来自stackoverflow的文章点我点我
看完这篇文章，大家应该至少大致怎么做了，下面我们来具体看一下：

首先在vue项目中运行npm install jointjs --save

然后在入口文件，我的是main.js，也有可能是app.js中加入下面两行，把joint.js和jquery作为全局变量

window.$ = require("jquery");
window.joint = require("jointjs");

这里需要注意的是，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文件出错，如果其他小伙伴尝试成功，欢迎交流分享。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93596.html

在vue中使用jointjs

摘要：在中引入的问题，之前在网上搜了很多，都没有给出一个确切的答案，捣鼓了两天终于弄明白了，做个记录。通过这样引入还不够，可能会遇到图可以正常加载，但无法拖拽的问题，遇到这些问题一般是和自己项目中的环境冲突了，导致无法读取或者读取错误。在vue中引入joint.js的问题，之前在网上搜了很多，都没有给出一个确切的答案，捣鼓了两天终于弄明白了，做个记录。首先，我参考了一篇来自stackove...

李昌杰 2019-08-30 14:12 评论0 收藏0
jointJS系列之一：jointJS的的初步使用

摘要：由于是基于的，因此对有一定的了解会对的理解和使用有较大帮助。由于是基于的，因此有视图和模型的概念。挂载的元素关联声明的元素的概念，就是图形显示的主体，可以有各种不同的形状，预设有常用的矩形椭圆平行四边形等。一、jointJS简介 jointJS是一个基于svg的图形化工具库，在画布上画出支持拖动的svg图形，而且可以导出JSON，也能通过JSON配置导入直接生成图形。可以基于joi...

amuqiao 2019-08-23 10:56 评论0 收藏0
jointJS(一）--关于jointJS的初认识

摘要：最近由于项目需要，开始接触，妥妥不停刷文档模式，先写一下对于的粗浅认识吧。我们可以使用已提供的图元素绘图，也可根据需求自定义一些图元素。另外，它极易上手且操作简单，并且支持所有的现代浏览器。最近由于项目需要，开始接触jointJS，妥妥不停刷文档模式，先写一下对于jointjs的粗浅认识吧。我们可以使用JointJS已提供的图元素绘图，也可根据需求自定义一些图元素。除此之外，Joi...

jas0n 2019-08-20 11:24 评论0 收藏0
1.JointJs Paper

摘要：在该模式下，所有的和会多一个属性，就行中的阴影有一个属性表示层级。为了控制哪些元素可以，需要配置。如果允许被潜入到，返回默认所有元素都可以到其他元素中当设置为的时候，用户将不能将移动到边界之外。关于JointJs的介绍，有一篇比较好JointJS介绍第一个类Paperjoint.dia.Paper 属性 el css选择器，Paper将在该Css选择的Container下画SV...

rose 2019-08-19 17:48 评论0 收藏0