我正在使用 @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
庫,它非常棒,並且滿足我的應用程式所需的所有要求。