码迷,mamicode.com
首页 > Web开发 > 详细

Vue 项目中使用 jsPlumb

时间:2017-07-14 13:31:20      阅读:12098      评论:0      收藏:0      [点我收藏+]

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

jsPlumb 介绍
 
jsPlumb 是一个强大的 JavaScript 连线库,它可以将 html中 的元素用箭头、曲线、直线等连接起来,适用于开发 Web 上的图表、建模工具、流程图、关系图等。
 
jsPlumb 参考网站
 
 
安装 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
  1. 初始化 jsPlumb,DOM初始化之后再调用jsPlumb
    jsPlumb.ready(function() {
        ...       
        // your jsPlumb related init code goes here
        ...
    });

      

  1. 实例化一个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 ]
    });
  2. 然后就尽情使用吧,具体使用方法见参考网站1

Vue 项目中使用 jsPlumb

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

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

(10)
(4)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!