如何在vue中使用jointjs过程解析
在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。
这样就行了么？就可以运行上文链接中的例子了么？像这样：
<template>
<div>
<h1>Home</h1>
<div id="myholder"></div>
</div>
</template>
<script>
export default {
created() {
let graph = new joint.dia.Graph;
let paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph,
gridSize: 1
});
let rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
});
let rect2 = rect.clone();
rect2.translate(300);
let link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
}
}
</script>
NoNoNo，注意到这里是把渲染放在了created的生命周期里，根据vue的生命周期，是无法找到joint的挂载div的el: $('#myholder')，也就是说，运行会报错，我的解决方法是把div放了一个click，把joint的内容从created中拿出，放在methods中，需要点击一下才可显示哦，还不太完美，以待改进(～￣▽￣)～
也就是说，代码会变成这样：
<template>
<div>
<div id="myholder" @click="click_joint"></div>
</div>
</template>
<script>
export default {
methods:{
click_joint() {
let graph = new joint.dia.Graph;
let paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 200,
model: graph,
gridSize: 1
});
let rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
});
let rect2 = rect.clone();
rect2.translate(300);
let link = new joint.dia.Link({
source: { id: rect.id },
target: { id: rect2.id }
});
graph.addCells([rect, rect2, link]);
}
}
}
</script>
点明一下，通过npm引入只要install jointjs就可以，不需要install lodash、backbone、jquery，也不需要在页面中导入joint.css文件。笔者之前通过script方式引入joint.js，试了很多次，都没有成功，一直读取joint.js文件出错，如果其他小伙伴尝试成功，欢迎交流分享。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了多页vue应用的单页面打包方法(内含打包模式的应用)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
在管理系统中，常常需要在顶部tags显示浏览历史。本文将教大家如何通过Vue实现这一功能，文中的示例代码讲解详细，需要的可以参考一下2021-12-12
本文主要介绍了VUE 自定义取色器组件的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要介绍了vue属性props默认类型的写法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
今天小编就为大家分享一篇Vue 配合eiement动态路由,权限验证的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue中使用WebWorker的示例代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-08-08
在Vue中，组件是构建用户界面的基本单位，封装公共组件是一种良好的实践，可以提高代码的可复用性和可维护性，下面我们就来看看如何封装一个公共的按钮组件吧2023-08-08
这篇文章主要介绍了vue踩坑之backgroundImage路径问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
这篇文章主要介绍了Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了解决vue项目运行npm run serve报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最新评论