在vue中使用jointjs的方法


Posted in Javascript onMarch 24, 2018

在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文件出错,如果其他小伙伴尝试成功,欢迎交流分享。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 圆角div的实现代码
Oct 15 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 Javascript
vue router 动态路由清除方式
May 25 Vue.js
React更新渲染原理深入分析
Dec 24 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 #Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 #jQuery
Webpack 之 babel-loader文件预处理器详解
Mar 23 #Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 #Javascript
Angular学习笔记之集成三方UI框架、控件的示例
Mar 23 #Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 #Javascript
JavaScript 五大常见函数
Mar 23 #Javascript
You might like
什么是短波收听SWL
2021/03/01 无线电
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
js html实现计算器功能
2018/11/13 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
node使用request请求的方法
2019/12/20 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
详解Python核心对象类型字符串
2018/02/11 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
详解Python3中ceil()函数用法
2019/02/19 Python
简单了解python单例模式的几种写法
2019/07/01 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
pandas数据拼接的实现示例
2020/04/16 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
python字典按照value排序方法
2020/12/28 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
简历中的自我评价范文
2014/02/05 职场文书
网络编辑岗位职责
2014/03/18 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS