집 > 기사 > 웹 프론트엔드 > vue+Jointjs 사용법 튜토리얼

vue+Jointjs 사용법 튜토리얼

php中世界最好的语言원래의: 2018-06-14 10:38:422703검색

이번에는 vue+Jointjs 튜토리얼을 가져왔습니다. vue+Jointjs 튜토리얼을 사용할 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

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

이 기사를 읽은 후 대략적으로 살펴보겠습니다.

먼저 npm installjoinjs를 실행하세요. --save

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

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

필요한 것 여기서 주의할 점은join.js 백본, jquery 및 lodash에 의존하여 스크립트를 통해 도입할 때 이러한 파일을 하나씩 가져와야 하지만 npm에서 도입한 vue의 npm을 사용할 경우에는 필요하지 않습니다. 이미 기본적으로 이를 캡슐화했습니다.

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

원래 프로젝트에 iview, axios, vuex, jquery를 설치했는데,join.js를 설치한 후 정상적으로 로드되지 않고 프로젝트를 다시 빌드하고 순서대로 설치했습니다. 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: $('#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, 렌더링은 생성된 라이프 사이클에 배치됩니다. vue의 라이프 사이클에 따르면 조인트 마운트 p의 el을 찾을 수 없습니다. 즉, $('#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: $('#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>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 확인하시기 바랍니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목해 보세요!