个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
25
4
我已经在脚本标签下的 .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>
然后你可以导入你要使用它的地方。
其他文件.js
<script>
import myDraggableComponent from './path/to/component/mydraggableview'
</script>
并将其用作指令或在您的组件中使用。
关于vue.js - 如何在vuejs中集成jsplumb？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44277245/
25
4
0
我是一名优秀的程序员,十分优秀！