vue+jsplumb如何实现连线绘图

小编给大家分享一下vue+jsplumb如何实现连线绘图，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

具体内容如下

jsPlumb是一个比较强大的绘图组件，它提供了一种方法，主要用于连接网页上的元素。在现代浏览器中，它使用SVG或者Canvas技术，而对于IE8以下(含IE8)的浏览器，则使用VML技术。

效果图

1.安装

npm install jsplumb --save

2.main.js 引入

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

3.示例代码

<template>  <div>    <div id="container">      <div class="left">        <ul>          <li v-for="(item,index) in leftList" :key="'left' + index" :id="item.nodeId" name="source">            {{item.name}}          </li>        </ul>      </div>      <div class="right">        <ul>          <li v-for="(item,index) in rightList" :key="'right' + index" :id="item.nodeId" name="target">            {{item.name}}          </li>        </ul>      </div>    </div>  </div></template><script>  export default {    name: "linkElementModal",    data() {      return {        jsPlumb: null, // 缓存实例化的jsplumb对象        leftList:[          {name: 'xxx_left_1', nodeId: 'left_1'},          {name: 'xxx_left_2', nodeId: 'left_2'},          {name: 'xxx_left_3', nodeId: 'left_3'},          {name: 'xxx_left_4', nodeId: 'left_4'}        ],        rightList:[          {name: 'xxx_right_1', nodeId: 'right_1'},          {name: 'xxx_right_2', nodeId: 'right_2'},          {name: 'xxx_right_3', nodeId: 'right_3'},          {name: 'xxx_right_4', nodeId: 'right_4'}        ]      }    },    mounted(){      this.showPlumb();    },    methods:{      showPlumb() {        this.jsPlumb = this.$jsPlumb.getInstance({          Container: 'container', // 选择器id          EndpointStyle: {radius: 0.11, fill: '#999'}, // 端点样式          PaintStyle: {stroke: '#999', strokeWidth: 2}, // 绘画样式，默认8px线宽  #456          HoverPaintStyle: {stroke: '#994B0A', strokeWidth: 3 }, // 默认悬停样式  默认为null          ConnectionOverlays: [ // 此处可以设置所有箭头的样式            ['Arrow', { // 设置参数可以参考中文文档              location: 1,              length: 12,              paintStyle: {                stroke: '#999',                fill: '#999'              }            }]          ],          Connector: ['Straight'], // 要使用的默认连接器的类型：直线，折线，曲线等          DrapOptions: {cursor: 'crosshair', zIndex: 2000}        });        this.jsPlumb.batch(() => {          for(let i = 0; i < this.leftList.length; i++){            this.initLeaf(this.leftList[i].nodeId, 'source');          }          for(let j = 0; j < this.rightList.length; j++){            this.initLeaf(this.rightList[j].nodeId , 'target')          }        })        this.setjsPlumb(true,true);        //点击连线        this.jsPlumb.bind('click',  (conn, originalEvent) => {         console.log(conn, originalEvent)        })        //连线时触发        this.jsPlumb.bind('connection',  (conn, originalEvent) => {          console.log(conn.sourceId)          console.log(conn.targetId)        })        //右键触发        this.jsPlumb.bind('contextmenu',  (conn, originalEvent) => {          console.log(conn, originalEvent)        })      },      //  初始化规则使其可以连线、拖拽      initLeaf(id, type) {        const ins = this.jsPlumb;        const elem = document.getElementById(id);        if (type === 'source') {          ins.makeSource(elem, {            anchor: [1, 0.5, 0, 0], // 左 上 右 下            allowLoopback: false, //允许回连            maxConnections: -1 //最大连接数（-1表示不限制）          })        } else {          ins.makeTarget(elem, {            anchor: [0, 0.5, 0, 0],            allowLoopback: false,            maxConnections: -1          })        }      },      setjsPlumb(sourceFlag, targetFlag){        const source = document.getElementsByName('source')        const target = document.getElementsByName('target')        this.jsPlumb.setSourceEnabled(source, sourceFlag)        this.jsPlumb.setTargetEnabled(target, targetFlag)        this.jsPlumb.setDraggable(source, false) // 是否支持拖拽        this.jsPlumb.setDraggable(target, false) // 是否支持拖拽      },    }  }</script><style>  #container{    width: 500px;    height: 500px;    padding: 20px;    position: relative;   }  .left{    float: left;    width: 150px;  }  .right{    float: right;    width: 150px;  }  .left li,.right li{    width: 100%;    border-radius: 4px;    border: 1px solid #ccc;    background: #efefef;    margin-bottom: 20px;    padding: 8px 5px;  }</style>

以上是“vue+jsplumb如何实现连线绘图”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！