如何將jsplumb集成到vuejs中？

我已經嘗試過腳本標記下的.html文件中的jsplumb腳本。這工作正常。如何將jsplumb集成到vuejs中？

<body> 
    <div id="q-app"></div> 
    <!-- built files will be auto injected --> 
    <script> 
    jsPlumb.ready(function() { 
      jsPlumb.connect({ 
       source:"item_left", 
       target:"item_right", 
       endpoint:"Rectangle" 
      }); 
      jsPlumb.draggable("item_left"); 
      jsPlumb.draggable("item_right"); 
     }); 
    </script> 
    </body>

但現在我想在.vue file.I這個jsplumb代碼/腳本集成試圖把這個腳本在腳本標記.vue文件，但我沒有得到任何輸出，除了零的空白頁錯誤。我該如何繼續進行下去？以一個簡單的例子來指導我。

來源

2017-05-31 swathi

我想你需要在腳本中導入jsplumb。試試看。 –

你可以試試這個：

mydraggableview.vue

<template> 
     <div id="diagramContainer"> 
     <div id="item_left" class="item"></div> 
     <div id="item_right" class="item" style="margin-left:50px;"></div> 
     </div> 
    </template> 

    <script> 
    import jsplumb from 'jsplumb' 
    export default { 
    props: ['yourProps'], 
    data() { 
     return { 
     your: data 
     } 
    }, 
    mounted(){ 
      jsPlumb.ready(function() { 
       jsPlumb.connect({ 
        source:"item_left", 
        target:"item_right", 
        endpoint:"Rectangle" 
       }) 
      }) 
      } 
     } 
    </script>

然後你可以導入你要去哪裏使用它。

otherfile.js

<script> 
    import myDraggableComponent from './path/to/component/mydraggableview' 
</script>

，並用它作爲指導或您的組件中。

來源

2018-02-16 07:07:53

如何將jsplumb集成到vuejs中？

回答

相關問題