如何将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中？

回答

相关问题