在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 相关文章推荐
jQuery基础语法实例入门
Dec 23 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 Javascript
巧用canvas
Jan 21 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
vue-i18n实现中英文切换的方法
Jul 06 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 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
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
jQuery使用手册之一
2007/03/24 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
python生成日历实例解析
2014/08/21 Python
详解Python中with语句的用法
2015/04/15 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
python实现简单多人聊天室
2018/12/11 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
python中添加模块导入路径的方法
2021/02/03 Python
.NET是怎么支持多种语言的
2015/02/24 面试题
介绍一下Java的事务处理
2012/12/07 面试题
中软国际Java程序员机试题
2012/08/19 面试题
教师通用专业自荐书范文
2014/02/11 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
小平您好观后感
2015/06/09 职场文书
Golang 实现超大文件读取的两种方法
2021/04/27 Golang