문서에 설명된 대로 @jsplumb/browser-ui
在我的 Nuxtjs/Vuejs
应用程序中创建一些 Nodes
를 사용하고 있습니다. 하지만 런타임에 노드를 만들고 싶습니다. 나는 그것을 할 수 없습니다.
사용자가 Add Event
按钮时,我想创建 nodes/rectangle
形状。因此,我不想以静态方式创建 Nodes
,而是想根据按钮单击动态/运行时创建它。我不明白如何使用 jsPlumb
문서를 클릭하여 이를 수행할 때마다 동일한 결과를 얻을 수 있는 특정 코드 예제가 없기 때문입니다.
내 코드는 다음과 같습니다.
<template> <div> <div class="container-fluid"> <div class="row"> <div class="col-md-6"> <button class="btn btn-primary btn-sm" @click="addConnector()"> Add Connector </button> <button class="btn btn-primary btn-sm" @click="addNode()"> Add Event </button> <button class="btn btn-success btn-sm" @click="submitEvents()"> Submit </button> </div> </div> <div class="row"> <div class="col-md-12"> <div id="diagram" ref="diagram" style="position: relative; width:100%; height:100%;" /> </div> </div> </div> </div> </template> <script> let jsPlumb = null export default { data () { return { nodeCounter: 0, nodeArray: [], connectorCounter: 0, connectorArray: [], allEventsInfoArray: [] } }, async mounted () { if (process.browser) { const jsPlumbBrowserUI = await import('@jsplumb/browser-ui') jsPlumb = jsPlumbBrowserUI.newInstance({ dragOptions: { cursor: 'pointer', zIndex: 2000 }, container: this.$refs.diagram }) console.log(jsPlumb) } }, methods: { // On click of Add Node button create the draggable node into the jsPlumb canvas addNode () { // const container = "<button class='btn btn-info' id='container_" + this.nodeCounter + "'></button>" this.nodeCounter++ }, // On click of Add Connector button create the draggable node into the jsPlumb canvas addConnector () { console.log('Add Connector : ') jsPlumb.connect({ anchor: 'AutoDefault', endpoints: ['Dot', 'Blank'], overlays: [ { type: 'Arrow', options: { location: 1 } }, { type: 'Label', options: { label: 'foo', location: 0.25, id: 'myLabel' } } ] }) } } } </script> <style scoped> </style>
이 답변이 미래에 누군가에게 도움이 되기를 바랍니다:
기고자 GitHub의 응답에 따르면
Nodes/Shapes
在Jsplumb 社区版
내에서 생성할 수 없습니다.DrawFlow
库,而不是Jsplumb
라이브러리를 사용하기 시작했는데 정말 훌륭하고 지원서에 필요한 모든 요구 사항을 충족합니다.