今回は、Vue で Jointjs 属性を使用する方法を説明します。Vue で Jointjs 属性を使用する際の 注意事項 は何ですか? 以下は実際的なケースです。
joint.js を vue に導入する問題についてインターネットでたくさん検索しましたが、誰も明確な答えを与えてくれませんでした。2 日間いじくり回した後、ようやく理解したのでメモします。まず最初に、stack
overflowの記事を参照しましたClick me click me
entry ファイル に追加します。私の場合は main.js または app.js で、joint.js と jquery をグローバル変数として使用します。
window.$ = require('jquery'); window.joint = require('jointjs');
<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>
<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>
以上がvueでjointjs属性を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。