如何在vue中使用jointjs过程解析


Posted in Javascript onMay 29, 2020

在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 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
来自国外的页面JavaScript文件优化
Dec 08 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
js动态改变select选择变更option的index值示例
Jul 10 Javascript
jquery使用经验小结
May 20 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
ES6 Generator函数的应用实例分析
Jun 26 Javascript
vue实现信息管理系统
May 30 #Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 #Javascript
vue实现户籍管理系统
May 29 #Javascript
JavaScript闭包原理与用法学习笔记
May 29 #Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 #jQuery
JS组件库AlloyTouch实现图片轮播过程解析
May 29 #Javascript
基于vue实现探探滑动组件功能
May 29 #Javascript
You might like
用PHP中的 == 运算符进行字符串比较
2006/11/26 PHP
PHP会话处理的10个函数
2015/08/11 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
prototype与__proto__区别详细介绍
2017/01/09 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
Python 装饰器深入理解
2017/03/16 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
品质主管的岗位职责
2013/12/04 职场文书
前台文员个人求职信范文
2014/01/05 职场文书
家庭教育先进个人事迹材料
2014/01/24 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
工地安全标语
2014/06/07 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
2014年幼儿园重阳节活动方案
2014/09/16 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
员工工作表现自我评价
2015/03/06 职场文书
工程项目合作意向书
2015/05/08 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL