在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代码(站点及虚拟目录)
Oct 20 Javascript
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
js闭包用法实例详解
Dec 13 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 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数组内存利用率低和弱类型详细解读
2017/08/10 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
php判断目录存在的简单方法
2019/09/26 PHP
List the Codec Files on a Computer
2007/06/11 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
python实现创建新列表和新字典,并使元素及键值对全部变成小写
2019/01/15 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
python 深度学习中的4种激活函数
2020/09/18 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
百思买美国官网:Best Buy
2016/07/28 全球购物
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
十佳班主任事迹材料
2014/01/18 职场文书
音乐教学随笔感言
2014/02/19 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL
JavaCV实现照片马赛克效果
2022/01/22 Java/Android
Golang jwt身份认证
2022/04/20 Golang