How to use jointjs in vue

This article mainly introduces the method of using jointjs in vue. Now I will share it with you and give you a reference.

Regarding the issue of introducing joint.js into vue, I searched a lot on the Internet before, but no definite answer was given. After two days of tinkering, I finally figured it out and made a record.
First of all, I referred to an article from stackoverflow click me click me

After reading this article, you should at least roughly do it. Let’s take a look at it in detail:

First run npm install jointjs --save in the vue project

Then add the following two lines to the entry file, mine is main.js, or it may be app.js, and add joint.js and jquery are used as global variables

window.$ = require('jquery');
window.joint = require('jointjs');

It should be noted here that joint.js relies on backbone, jquery and lodash, through script When importing, you need to import these files one by one, but not when using npm of vue. The joint.js introduced by npm has already encapsulated these by default.

It is not enough to introduce it in this way. You may encounter the problem that the diagram can be loaded normally, but cannot be dragged. When encountering these problems, it is usually due to the conflict between joint.js and the environment in your own vue project. Resulting in an inability to read or a read error.

I installed element, iview, axios, vuex, and jquery in my original project. After installing joint.js, jointjs could not be loaded normally. Later, I rebuilt a project and only installed element, axios, and vuex. , in order to avoid conflicts between jquery and jquery in joint.js, jquery was not installed later.

Is this okay? Can I run the example in the link above? Like this:

<template>
  <p>
    <h1 id="Home">Home</h1>
    <p id="myholder"></p>
  </p>
</template>

<script>
  export default {
    created() {
      let graph = new joint.dia.Graph;

      let paper = new joint.dia.Paper({
        el: $(&#39;#myholder&#39;),
        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: &#39;blue&#39; }, text: { text: &#39;my box&#39;, fill: &#39;white&#39; } }
      });

      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, notice that the rendering is placed in the created life cycle. According to the vue life cycle, the joint cannot be found. Mount p's el: $('#myholder'), which means that an error will be reported when running. My solution is to put a click on p, take the content of joint out of created, and put it in methods. Click to display it. It is not perfect yet and needs to be improved (~￣▽￣)~

In other words, the code will become like this:

<template>
  <p>
    <p id="myholder" @click="click_joint"></p>
  </p>
</template>

<script>
  export default {
   methods:{
     click_joint() {
      let graph = new joint.dia.Graph;

      let paper = new joint.dia.Paper({
        el: $(&#39;#myholder&#39;),
        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: &#39;blue&#39; }, text: { text: &#39;my box&#39;, fill: &#39;white&#39; } }
      });

      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>

To point out, if you import it through npm, you only need to install jointjs. There is no need to install lodash, backbone, jquery, or import the joint.css file into the page. The author has introduced joint.js through script before. I have tried many times without success. I keep getting errors when reading the joint.js file. If other friends try successfully, please feel free to share.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use the better-scroll plug-in in Angular_AngularJS

Use node to create your own commands Line tool method tutorial

Angularjs implementation of communication methods between controllers Example summary

The above is the detailed content of How to use jointjs in vue. For more information, please follow other related articles on the PHP Chinese website!