vue+Jointjs usage tutorial

This time I will bring you a vue Jointjs tutorial. What are the precautions for using the vue Jointjs tutorial? The following is a practical case, let’s take a look.

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 how to 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 use joint.js and jquery as Global variables

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

It should be noted here that joint.js relies on backbone, jquery and lodash. When introducing through script, these files need to be introduced one by one, but it is not required when using npm of vue. npm introduces joint.js 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 caused by the conflict between joint.js and the environment in your own vue project, resulting in the inability to read. Fetch or 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>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: $('#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, notice that the rendering is placed in the life cycle of created. According to the life cycle of vue, the el of joint's mounting p cannot be found: $('#myholder' ), that is to say, 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. It needs to be clicked before it can be displayed. It is not perfect yet. 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: $('#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>

I believe you have mastered the method after reading the case in this article. For more exciting things, please pay attention to php Other related articles on the Chinese website!

Recommended reading:

How Angular CLI generates routes

How Angular CLI uses blueprints to generate code

The above is the detailed content of vue+Jointjs usage tutorial. For more information, please follow other related articles on the PHP Chinese website!