vue.js – 如何在vuejs中集成jsplumb？

2023年3月24日 236次阅读

我在script标签下的.html文件中尝试了jsplumb脚本.这工作正常.

 <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>

但现在我想将这个jsplumb代码/脚本集成到.vue文件中.我试图把这个脚本放在脚本标签下的.vue文件中,但除了没有错误的空白页面之外我没有得到任何输出.我该如何进一步处理？.用一些简单的例子指导我.

最佳答案 你可以试试这个：

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>

并将其用作指令或在组件内部.

点赞