집 > 기사 > 웹 프론트엔드 > Vue에서 Jointjs를 사용하는 방법

Vue에서 Jointjs를 사용하는 방법

亚连원래의: 2018-05-29 11:10:461866검색

이 글에서는 Vue에서 Jointjs를 사용하는 방법을 주로 소개하고 참고하겠습니다.

join.js를 vue에 도입할 때의 문제 예전에 인터넷에서 많이 검색해봤는데 아무도 명확한 답변을 해주지 않아서 이틀간의 고민 끝에 드디어 알아내고 기록을 남겼습니다.
우선 stackoverflow의 기사를 참고했습니다. Click me, click me

이 기사를 읽은 후에는 최소한 어떻게 해야 하는지 대략적으로 살펴보겠습니다. 세부사항:

먼저 vue 프로젝트에서 npm install을 실행하세요.joinjs --save

그런 다음 항목 파일에 다음 두 줄을 추가하세요. 광산은 main.js이거나 app.js일 수 있으며,join.js를 사용하고 jquery를 전역 변수로

window.$ = require(&#39;jquery&#39;);
window.joint = require(&#39;jointjs&#39;);

여기에서 필요합니다. 참고로 Joint.js는 backbone, jquery, lodash를 사용하므로 스크립트를 통해 소개할 때는 이 파일들을 하나씩 import해야 하지만 npm을 사용할 때는 필요하지 않습니다. npm이 도입한 Joint.js는 이미 기본적으로 이러한 파일을 캡슐화했습니다.

이런 방식으로는 이미지를 정상적으로 로드할 수 있지만 드래그할 수 없는 문제가 발생할 수 있습니다. 이러한 문제가 발생하는 경우 일반적으로 조인트.js와 환경 간의 충돌로 인해 발생합니다. 자신의 vue 프로젝트를 읽거나 읽을 수 없게 됩니다.

원본 프로젝트에 element, axios, vuex, jquery를 설치했는데,join.js를 설치한 후, 이후에 프로젝트를 다시 빌드하고 element, axios, vuex만 설치했습니다. jquery를 피하기 위해 Joint.js에서 jquery와 충돌이 발생하여 나중에 jquery가 설치되지 않았습니다.

이거 괜찮나요? 위 링크의 예제를 실행할 수 있나요? 이렇게:

<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: $(&#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, vue의 라이프 사이클에 따르면 렌더링이 생성된 라이프 사이클에 배치된다는 점에 유의하세요. 조인트 마운트 p의 엘을 찾는 것은 불가능합니다: $('#myholder ' ) 즉, 실행 시 오류가 보고됩니다. 내 솔루션은 p를 클릭하고 생성된 조인트의 내용을 가져와서 메서드에 넣어야 한다는 것입니다. 아직 완벽하지는 않습니다. 개선을 위해(~￣▽￣)~

즉, 코드는 다음과 같습니다.

<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>

참고로 npm을 통해 소개하면, Jointjs만 설치하면 됩니다. lodash, backbone, jquery를 설치할 필요가 없으며,join.css 파일을 페이지로 가져올 필요도 없습니다. 저자는 이전에 스크립트를 통해 조인트.js를 여러 번 시도했는데 성공하지 못했습니다. 다른 친구들이 성공적으로 시도하면 자유롭게 공유해 주세요.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

Vue에서 Jointjs를 사용하는 방법

관련 기사