Vue 项目中使用 jsPlumb

2021-06-22 18:04

阅读：334

标签：nes ini ted 适用于连接 java cnp fill 建模

jsPlumb 介绍

jsPlumb 是一个强大的 JavaScript 连线库，它可以将 html中的元素用箭头、曲线、直线等连接起来，适用于开发 Web 上的图表、建模工具、流程图、关系图等。

jsPlumb 参考网站

博客园：http://www.cnblogs.com/leomYili/p/6346526.html?utm_source=itdadao&utm_medium=referral

官网：https://www.jsplumbtoolkit.com/

安装 jsPlumb

vue 项目中安装 jsPlumb 模块

npm install jsPlumb --save(建议使用cnpm，--save表示将模块写入package.json文件dependencies属性

main.js 中引入 jsPlumb（全局引入，也可以局部引入）

import jsPlumb from ‘jsplumb‘
Vue.prototype.$jsPlumb = jsPlumb.jsPlumb

经过上述步骤后，可以在所有的vue组件里通过 this.$jsPlumb 引用jsPlump模块

使用 jsPlumb

初始化 jsPlumb,DOM初始化之后再调用jsPlumb

jsPlumb.ready(function() {
    ...       
    // your jsPlumb related init code goes here
    ...
});

实例化一个jsPlumb实例，并且可以提供一个默认值对象

var instance = jsPlumb.getInstance({
  PaintStyle:{
    strokeWidth:6,
    stroke:"#567567",
    outlineStroke:"black",
    outlineWidth:1
  },
  Connector:[ "Bezier", { curviness: 30 } ],
  Endpoint:[ "Dot", { radius:5 } ],
  EndpointStyle : { fill: "#567567"  },
  Anchor : [ 0.5, 0.5, 1, 1 ]
});

然后就尽情使用吧，具体使用方法见参考网站1

Vue 项目中使用 jsPlumb

标签：nes ini ted 适用于连接 java cnp fill 建模

原文地址：http://www.cnblogs.com/sunmaer/p/7169442.html

上一篇：CSS 链接

下一篇：php审计学习:xdcms2.0.8注入

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：Vue 项目中使用 jsPlumb
文章链接：http://soscw.com/index.php/essay/97484.html

亲，登录后才可以留言！

Vue 项目中使用 jsPlumb

评论

热门文章

推荐文章

最新文章

置顶文章