在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 相关文章推荐
把input初始值不写value的具体实现方法
Jul 04 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
js运动动画的八个知识点
Mar 12 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 Javascript
JavaScript命名空间模式实例详解
Jun 20 Javascript
JavaScript中的几种继承方法示例
Dec 06 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
检测png图片是否完整的php代码
2010/09/06 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
基于node实现websocket协议
2016/04/25 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
Vue计算属性的学习笔记
2017/03/22 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
Python如何爬取实时变化的WebSocket数据的方法
2019/03/09 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
python实现智能语音天气预报
2019/12/02 Python
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
Nginx动静分离配置实现与说明
2022/04/07 Servers
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python